<template>
  <div>
    <!-- 基于 Element UI 新增和修改弹窗 -->
    <el-dialog
      :title="'楼层子项调整'"
      :close-on-click-modal="false"
      :visible.sync="visible"
    >
      <!-- 新增和创建表单表单 -->
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataSubmit()"
               label-width="110px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="dataForm.name" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="dataForm.title" placeholder="标题"></el-input>
        </el-form-item>

        <el-form-item label="楼层图：" prop="imgUrl">
          <div class="upLoadPicBox" @click="modalPicTap('1')" :disabled="isDisabled">
            <div v-if="dataForm.imgUrl" class="pictrue"><img :src="dataForm.imgUrl"></div>
            <div v-else class="upLoad">
              <i class="el-icon-camera cameraIconfont" />
            </div>
          </div>
        </el-form-item>

        <el-form-item label="跳转类型" prop="jumpType">
          <el-select v-model="dataForm.jumpType" placeholder="请选择" class="selWidthd" style="width: 220px" @change="jumpTypeChange()">
            <el-option :value="item.id" v-for="(item, index) in jumpTypeList" :key="index" :label="item.name"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="选商品" prop="jumpIdsText" v-if="dataForm.jumpType == 1">
          <el-input v-model="dataForm.jumpIdsText" placeholder="选商品" @click.native="selectProductSwitch(1)"></el-input>
        </el-form-item>
        <el-form-item label="选分类" prop="jumpIds" v-else-if="dataForm.jumpType == 2">
          <el-select v-model="dataForm.jumpIds" placeholder="选分类" class="selWidthd" style="width: 220px" @click.native="selectCate">
            <el-option :value="item.id.toString()" v-for="(item, index) in productCateList" :key="index" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选商品" prop="jumpIdsText" v-else-if="dataForm.jumpType == 3">
          <el-input v-model="dataForm.jumpIdsText" placeholder="选商品" @click.native="selectProductSwitch(1)"></el-input>
        </el-form-item>
        <!--      <el-form-item label="选活动" prop="jumpIds" v-if="dataForm.jumpType === 4">-->
        <!--        <el-input v-model="dataForm.jumpIds" placeholder="选活动"></el-input>-->
        <!--      </el-form-item>-->

<!--        <el-form-item label="跳转地址" prop="jumpUrl">-->
<!--          <el-input v-model="dataForm.jumpUrl" placeholder="跳转地址"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="是否无效" prop="status">
          <el-select v-model="dataForm.delFlag" class="selWidthd" style="width: 220px">
            <el-option label="有效" :value="1"></el-option>
            <el-option label="无效" :value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataSubmit()">确定</el-button>
    </span>
    </el-dialog>

    <el-dialog
      title="选择商品"
      :close-on-click-modal="false"
      :visible.sync="selectProductVisible"
      @close="selectProductSwitch(0)">
      <!-- 选择商品 -->
      <selectProductWindow v-if="selectProductShow" ref="select_product_window"/>
      <el-button type="primary" @click="selectProductOk()" style="margin-left: 90%">确定</el-button>
    </el-dialog>
  </div>
</template>

<script>
import * as api from '@/api/homeItem.js'
import { listCategroy } from "@/api/categoryApi";
import selectProductWindow from "@/views/home/selectProduct";

export default {
  components: {selectProductWindow},
  data() {
    return {
      isDisabled: false,
      visible: false,
      jumpTypeList: [
        {id: 0, name: '无跳转'},
        {id: 1, name: '商品详情'},
        {id: 2, name: '分类列表'},
        {id: 3, name: '商品列表'},
        // {id: 4, name: '活动栏目'},
      ],
      productCateList: [],
      selectProductVisible: false,
      selectProductShow: false,
      dataForm: {
        id: 0,
        name: '',
        title: '',
        homeId: '',
        imgUrl: '',
        jumpType: '',
        jumpUrl: '',
        jumpIds: '',
        jumpIdsText: '',
        business: '',
        delFlag: '',
        orderNo: '',
      },
      dataRule: {
        name: [
          {required: true, message: '名称  为必填项', trigger: 'blur'}
        ],
        title: [
          {required: true, message: '标题  为必填项', trigger: 'blur'}
        ],
        jumpType: [
          {required: true, message: '跳转类型 为必填项', trigger: 'blur'}
        ],
        orderNo: [
          {required: true, message: '排序  为必填项', trigger: 'blur'}
        ],
        delFlag: [
          {required: true, message: '是否有效 为必填项', trigger: 'blur'}
        ],
      }
    }
  },
  methods: {
    init(id) { // 初始化表单验证规则
      document.querySelector('.el-dialog__wrapper .el-dialog').style.width = '45%'
      this.dataForm.id = id
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          api.detailApi(id).then(res => {
            this.dataForm = res;
          })
          this.selectCate()
        }
      })
    },
    // 表单数据提交
    dataSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loading = true;
          api.updateApi(this.dataForm).then(res => {
            this.$message.success('修改成功');
          })
          this.visible = false;
          setTimeout(() => {
            this.$emit('refreshDataList')
          }, 600)
          this.loading = false;
        }
      })
    },
    jumpTypeChange() {
      this.dataForm.jumpIds = '';
      this.dataForm.jumpIdsText = '';
    },
    selectProductOk() {
      let products = this.$refs['select_product_window'].dataListSelections;
      if (products.length <= 0) {
        this.$message.error('请选择商品');
        return;
      }
      if (this.selectProductNum !== 0 && this.selectProductNum < products.length) {
        this.$message.error('只能选择' + this.selectProductNum + '件商品');
        return;
      }
      let ids = products.map(item => { return item.id })
      let storeName = products.map(item => { return item.storeName })
      this.dataForm.jumpIds = ids + "";
      this.dataForm.jumpIdsText = storeName + "";
      this.selectProductSwitch(0);
    },
    selectProductSwitch(flag, num, index) {
      this.selectProductVisible = (flag === 1 ? true : false);
      this.selectProductShow = (flag === 1 ? true : false);
      this.selectProductNum = (flag === 1 ? num : 0);
    },
    selectCate() {
      listCategroy({ limit: 999, page: '1', status: 1, type: 1 }).then(res => {
        this.productCateList = res.list;
      })
    },
    // 点击商品图
    modalPicTap (tit, num, i,status) {
      const _this = this;
      if(_this.isDisabled) return;
      this.$modalUpload(function(img) {
        if(tit==='1'&& !num){
          _this.dataForm.imgUrl = img[0].sattDir
        }
      },tit, 'content')
    },
  }
}
</script>
