<template>
  <div>
    <a-modal
      class="modalBox"
      title="新增绑定"
      v-model="isshow"
      @cancle="cancel"
      :footer="null"
      :width="600"
      :centered="true">
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :labelCol="{span:5}" :wrapperCol="{span:15}">
        <a-form-model-item required label="选择供应商" prop="supplierName">
          <a-select
            id="storeBindModal-supplierName"
            show-search
            allowClear
            placeholder="请输入供应商名称精确搜索"
            :show-arrow="false"
            :filter-option="false"
            option-filter-prop="children"
            @search="handleSupplierSearch"
            v-model="form.supplierName">
            <a-select-option v-for="item in supplierList" :key="item.supplierSn" :value="item.supplierSn">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="选择关联客户" prop="storeName">
          <a-select
            id="storeBindModal-storeName"
            show-search
            allowClear
            placeholder="请输入客户名称精确搜索"
            :show-arrow="false"
            :filter-option="false"
            optionLabelProp="value"
            @search="storeSearchRequest"
            @change="storeChange"
            v-model="form.storeName">
            <a-select-option :disabled="item.bindFlag=='BIND'" v-for="item in storeList" :key="item.name" :value="item.name">
              {{ item.name }}
              <span style="float: right;">{{ item.bindFlag=='BIND'?'已绑定':'未绑定' }}</span>
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="门店地址" prop="storeAddress">
          <span>{{ form.storeAddress }}</span>
        </a-form-model-item>
        <a-form-model-item class="submit-cont" :wrapper-col="{ span: 14, offset: 9 }">
          <a-button type="primary" id="storeBindModal-submit" @click="submitForm('ruleForm')">
            提交
          </a-button>
          <a-button id="storeBindModal-cancle" style="margin-left: 10px" @click="cancel">
            取消
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import {
  supplierStoreBind,
  storeQueryAll
} from '@/api/storeManagement.js'
import { supplierQueryAll } from '@/api/supplierManagement.js'
export default {
  props: {
    openStoreBindModal: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      isshow: this.openStoreBindModal,
      supplierList: [], // 供应商列表
      storeList: [], // 门店列表
      form: {
        supplierName: undefined, // 供应商名称
        storeName: undefined, // 门店名称
        storeAddress: '' // 门店地址
      },
      rules: {
        supplierName: [{
          required: true,
          message: '请选择供应商',
          trigger: ['change', 'blur']
        }],
        storeName: [{
          required: true,
          message: '请选择关联客户',
          trigger: ['change', 'blur']
        }]
      }
    }
  },
  computed: {},
  methods: {
    // 门店搜索查询
    storeSearchRequest (val) {
      if (val) {
        storeQueryAll({
          name: val
        }).then(res => {
          this.storeList = res.data || []
        })
      } else {
        this.storeList = []
      }
    },
    // 供应商搜索查询
    handleSupplierSearch (val) {
      if (val) {
        supplierQueryAll({
          name: val
        }).then(res => {
          this.supplierList = res.data || []
        })
      } else {
        this.supplierList = []
      }
    },
    // 关联客户选择修改
    storeChange (val) {
      console.log(val, 'vvvvvvv')
      if (val) {
        const has = this.storeList.find(item => item.name == val)
        this.form.storeAddress = has ? has.addrProvinceName + has.addrCityName + has.addrDistrictName + has.addrDetail
          : ''
      }
    },
    // 提交
    submitForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const params = {
            supplierSn: this.form.supplierName,
            storeSn: this.storeList.find(item => item.name == this.form.storeName).storeSn
          }
          supplierStoreBind(params).then(res => {
            if (res.status == 200) {
              this.$message.success(res.message)
              this.$emit('refresh')
              setTimeout(() => {
                this.cancel()
              }, 300)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 关闭弹窗
    cancel () {
      this.$refs['ruleForm'].resetFields()
      this.$emit('close')
    }
  },
  watch: {
    openStoreBindModal (newValue, oldValue) {
      this.isshow = newValue
    },
    isshow (val) {
      if (!val) {
        this.$emit('close')
      } else {
        setTimeout(() => {
          this.$refs['ruleForm'].resetFields()
        }, 100)
      }
    },
    settleId (newValue, oldValue) {
      if (newValue && this.isshow) {
        this.$refs.table.refresh(newValue)
      }
    }
  }
}
</script>

<style scoped="scoped">
  .submit-cont {
    padding-top: 50px;
  }
</style>
