<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="750px"
    :append-to-body="true"
    :before-close="close"
    :destroy-on-close="true"
    :close-on-click-modal="false"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="120px"
      label-position="top"
      style="max-height: 375px;overflow: auto;"
    >
    <flexbox class="ygp-form-items" align="flex-start" justify="flex-start">
      <el-form-item label="经销商名称" prop="colAddress" style="width: 50%;">
        <el-input v-model="form.colAddress" placeholder="请输入采集器编号" v-if="!editId" />
        <span v-else :class="loading?'el-icon-loading':''">{{detail.colAddress}}</span>
      </el-form-item>
       <el-form-item label="手机号码" prop="colAddress" style="width: 50%;">
         <el-input v-model="form.colAddress" placeholder="请输入采集器编号" v-if="!editId" />
         <span v-else :class="loading?'el-icon-loading':''">{{detail.colAddress}}</span>
       </el-form-item>
    </flexbox>
      <flexbox class="ygp-form-items" align="flex-start" justify="flex-start">
        <el-form-item label="上级渠道" prop="custId" style="width: 50%;">
          <el-select
            v-if="!editId"
            v-model="form.custId"
            placeholder="请选择客户"
            style="width: 100%;"
            filterable
            clearable
            @change="getCustStoreItem"
          >
            <el-option
              v-for="(item, index) in custOptions"
              :key="index"
              :label="item.name"
              :value="item.custId"
            />
          </el-select>
          <span v-else :class="loading?'el-icon-loading':''">{{detail.customer && detail.customer.name}}</span>
        </el-form-item>
       <el-form-item label="联系人" prop="colAddress" style="width: 50%;">
         <el-input v-model="form.colAddress" placeholder="请输入采集器编号" v-if="!editId" />
         <span v-else :class="loading?'el-icon-loading':''">{{detail.colAddress}}</span>
       </el-form-item>
      </flexbox>
      <flexbox class="ygp-form-items" align="flex-start" justify="flex-start">
        <el-form-item label="佣金比例" prop="colAddress" style="width: 50%;">
          <el-input v-model="form.colAddress" placeholder="请输入采集器编号" v-if="!editId" />
          <span v-else :class="loading?'el-icon-loading':''">{{detail.colAddress}}</span>
        </el-form-item>
        <el-form-item label="经销商类型" prop="typeId" style="width: 50%;">
          <el-select
            v-if="!editId"
            v-model="form.typeId"
            placeholder="请选择类型"
            style="width: 100%;"
            filterable
            clearable
            :disabled="editId?true:false"
          >
            <el-option
              v-for="(item, index) in typeOptions"
              :key="index"
              :label="item.desc"
              :value="item.typeId"
            />
          </el-select>
          <span v-else :class="loading?'el-icon-loading':''">{{detail.typeId && detail.typeId.desc}}</span>
        </el-form-item>
      </flexbox>

      <flexbox class="ygp-form-items" align="flex-start" justify="flex-start">
        <el-form-item label="地区" style="width: 50%;">
          <el-select v-model="form.status" placeholder="选择省份" clearable size="small" style="width: 33%;margin-right: 1px;">
            <el-option
              v-for="dict in statusOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
          <el-select v-model="form.status" placeholder="选择市" clearable size="small" style="width: 33%;margin-right: 1px;">
            <el-option
              v-for="dict in statusOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
          <el-select v-model="form.status" placeholder="选择区" clearable size="small" style="width: 33%;margin-right: 1px;">
            <el-option
              v-for="dict in statusOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址" prop="colAddress" style="width: 50%;">
          <el-input v-model="form.colAddress" placeholder="请输入采集器编号" v-if="!editId" />
          <span v-else :class="loading?'el-icon-loading':''">{{detail.colAddress}}</span>
        </el-form-item>
      </flexbox>
      <flexbox
          class="ygp-form-items"
          align="flex-start"
          justify="flex-start">
         <el-form-item label="营业执照" prop="rentContract" style="width: 50%;">
          <image-upload
            :limit="7"
            :value="rentContract"
            :file-size="50"
            :is-public="false"
            :show-file-list="true"
            :auto-upload="false"
             @input="rentContractSelect"
          />
         </el-form-item>
         <el-form-item label="门头照片" prop="rentContract" style="width: 50%;">
          <image-upload
            :limit="7"
            :value="rentContract"
            :file-size="50"
            :is-public="false"
            :show-file-list="true"
            :auto-upload="false"
             @input="rentContractSelect"
          />
         </el-form-item>
      </flexbox>
      <flexbox class="ygp-form-items" align="flex-start" justify="flex-start">
         <el-form-item label="认证状态" prop="colAddress" style="width: 50%;">
           <el-input v-model="form.colAddress" placeholder="请输入采集器编号" v-if="!editId" />
           <span v-else :class="loading?'el-icon-loading':''">{{detail.colAddress}}</span>
         </el-form-item>
      </flexbox>
     <!-- <flexbox class="ygp-form-items" align="flex-start" justify="flex-start">
        <el-form-item label="备注" prop="label" style="width: 100%;">
          <el-input
            type="textarea"
            :rows="3"
            :autosize="{ minRows: 3}"
            :maxlength="64"
            show-word-limit
            resize="none"
            v-model="form.label"
            placeholder="请输入备注"
          />
        </el-form-item>
      </flexbox> -->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" :disabled="loading" @click="saveClick">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { mapGetters } from "vuex";
import CustomFieldsMixin from "@/mixins/CustomFields";
// import {
//   getCollector,
//   addCollector,
//   updateCollector,
//   itemTypes
// } from "@/api/business/collector";
// import { itemCustomer } from "@/api/business/customer";
// import { itemStore } from "@/api/business/store";
export default {
  mixins: [CustomFieldsMixin],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    editId: [Number, String] //  编辑用
  },

  data() {
    return {
      loading: false,
      statusOptions: [],
      // 表单参数
      form: {},
      detail: {},
      feeItems: [],
      checkedItems: [],
      custOptions: [],
      storeOptions: [],
      typeOptions: [],
      // 表单校验
      rules: {
        custId: [{ required: true, message: "请选择客户", trigger: "change" }],
        storeId: [{ required: true, message: "请选择门店", trigger: "change" }],
        colAddress: [
          { required: true, message: "请输入采集器编号", trigger: "blur" }
        ],
        typeId: [
          { required: true, message: "请选择设备类型", trigger: "change" }
        ],
        label: [{ required: false, message: "请输入备注", trigger: "blur" }]
      },
      //招商推广宣传图
      picture: []
    };
  },

  computed: {
    ...mapGetters(["userInfo"]),
    title() {
      return this.editId ? "编辑经销商" : "添加经销商";
    }
  },

  created() {
    //this.getCustItems();
   // this.getTypeItems();
    //console.log("watch dialogVisible created == ");
    // 是编辑
    if (this.editId) {
     // this.getDetail();
    }
  },

  mounted() {
    document.body.appendChild(this.$el);
  },

  destroyed() {
    // if appendToBody is true, remove DOM node after destroy
    if (this.appendToBody && this.$el && this.$el.parentNode) {
      this.$el.parentNode.removeChild(this.$el);
    }
  },

  methods: {
    // /** 查询可分配的门店 */
    getCustItems() {
      this.custOptions = [];
      itemCustomer({})
        .then(res => {
          const resData = res.data || [];
          this.custOptions = resData;
        })
        .catch(() => {
          this.loading = false;
        });
    },

    // /** 查询可分配的门店 */
    getCustStoreItem() {
      this.storeOptions = [];
      this.$set(this.form, "storeId", "");
      itemStore({
        custId: this.form.custId
      })
        .then(res => {
          const resData = res.data || [];
          this.storeOptions = resData;
        })
        .catch(() => {
          this.loading = false;
        });
    },

    // /** 查询可分配的门店 */
    getTypeItems() {
      this.typeOptions = [];
      itemTypes({})
        .then(res => {
          const resData = res.data || [];
          this.typeOptions = resData;
        })
        .catch(() => {
          this.loading = false;
        });
    },

    /**
     * 获取项目详情
     */
    getDetail() {
      this.loading = true;
      getCollector({
        colDeviceId: this.editId
      }).then(res => {
          const data = res.data || {}
          // console.log("getDetail :" + JSON.stringify(data))
          this.detail = data
          this.$set(this.form,'custId', data.custId)
          this.$set(this.form,'storeId', data.storeId)
          this.$set(this.form,'colAddress', data.colAddress)
          const deviceCategory = JSON.parse(data.typeId || {})
          this.detail.typeId = deviceCategory
          this.$set(this.form,'typeId', deviceCategory.value)
          this.$set(this.form,'label', data.label)
          this.loading = false
          // if(this.editId){
          //   this.getCustStoreItem()
          // }
        })
        .catch(() => {
          this.loading = false;
        });
    },


    saveClick(){
      // console.log("saveClick tthis.form = "+JSON.stringify(this.form))
      this.loading = true
      const subForm = this.$refs["form"]
      subForm.validate(valid => {
        if (valid) {
          this.submitForm(this.form);
        } else {
          this.loading = false;
          // 提示第一个error
          this.getFormErrorMessage(subForm);
          return false;
        }
      });
    },

    /**
     * 保存
     */
    submitForm(params) {
      // console.log("submitForm =============")
      if (this.editId) {
        params.colDeviceId = this.editId;
      }
      const request = this.editId ? updateCollector : addCollector
      // console.log("submitForm params = "+ JSON.stringify(params))
      request(params).then(response => {
        this.loading = false
        if(this.editId){
           this.$message.success('更新成功')
        }else{
           this.$message.success('新增成功')
        }
        this.$emit('saveSuccess')
        this.close()
      }).catch(() => {
        this.loading = false
      });
    },

    /**
     * 关闭窗口
     */
    close() {
      this.$emit("close");
      this.form = {
        month: 3,
        packageType: "1"
      };
    }
  }
};
</script>

<style scoped lang="scss">
.tag {
  margin-right: 15px;
  width: 90px;
  text-align: center;
  cursor: pointer;
}

.tag-select {
  background-color: #409eff !important;
  border-color: #409eff !important;
  color: #fff !important;
}

.cover-content-item {
  width: 220px;
  float: left;
  position: relative;
  .cover-img {
    width: 200px;
    height: 100px;
  }
  .cover-mark {
    position: absolute;
    top: 0px;
    right: 28px;
    z-index: 1;
    color: red;
    cursor: pointer;
    visibility: hidden;
  }
  .select {
    visibility: visible !important;
  }
}

.dialog-footer {
  text-align: center;
}
</style>

<style lang="scss">
.ygp-form-items {
  .el-form-item {
    padding: 0 5px;
  }
  .el-form-item__label {
    line-height: 1.2;
    padding-bottom: 8px;
    word-break: break-all;
    word-wrap: break-word;
    color: #333;
  }

  .el-form-item__error {
    position: relative;
    top: auto;
    left: auto;
  }

  .el-form-item.is-desc_text {
    .el-form-item__label {
      display: none;
    }
  }
}
</style>
