<template>
  <CommonModal
    v-model="show"
    class="color-tag-modal"
    title="修改物流"
    width="450"
    closable
    :on-confirm="onConfirm"
    @change="onVisibleChange"
  >
    <div class="modal-centent">
      <Form
        ref="form"
        :model="formData"
        :rules="rules"
        :label-width="135"
      >
        <FormItem
          label="请选择物流公司"
          prop="expressName"
        >
          <DropMultiSelectFilter
            ref="Express"
            single
            class="input_box"
            :data="ExpressList"
            :default-selected="defaultSelected"
            :total-row-count="ExpresstotalRowCount"
            :show-colname-key="'isak'"
            :columns="columns"
            :auto-data="ExpressAutoData"
            @on-page-change="changePageShop($event,'Express')"
            @on-input-value-change="InputValueChangeShop($event,'Express')"
            @on-popper-show="searchShopData('Express')"
            @on-fkrp-selected="checkDataShop($event,'Express')"
            @on-focus="focusInputValueChangeShop($event,'Express')"
            @on-clear="clearDataShop('Express')"
          />
        </FormItem>
        <FormItem
          label="请输入物流单号"
          prop="logistics_number"
        >
          <Input v-model="formData.logistics_number" placeholder="请输入物流单号"/>
        </FormItem>

      </Form>
    </div>
  </CommonModal>
</template>

<script>
import CommonModal from '@yunque/component/modal/commonModal/index.vue';
import cloneDeep from "lodash/cloneDeep";

const R3 = window.R3;
const {network, urlSearchParams} = R3;

export default {
  name: 'InStoreModal',

  components: {
    CommonModal,
  },
  props: {
    visible: {
      type: Boolean,
    },
    orderInfo: {
      type: Object
    },
  },
  model: {
    prop: 'visible',
    event: 'change',
  },

  watch: {
    visible(val) {
      this.show = val;
      if (val) {
        console.log(888, this.orderInfo);
        const orderInfo = cloneDeep(this.orderInfo);
        const defaultVal = [{ID: orderInfo.shipperId, Label: orderInfo.shipperName}];
        this.defaultSelected = defaultVal;
        this.formData.expressName = defaultVal;
        this.formData.logistics_number = orderInfo.logisticsNo;
      }
    },
    'formData.expressName': {
      handler(newVal, oldVal) {
        if (newVal != oldVal) {
          const orderInfo = cloneDeep(this.orderInfo);
          this.formData.logistics_number = this.formData.expressName[0].Label === orderInfo.shipperName ? orderInfo.logisticsNo : '';
        }
      },
    },

  },

  data() {
    return {
      columns: ['name', 'value'], // 展现的组
      defaultSelected: [],
      ExpresstotalRowCount: 0,
      ExpressAutoData: [], // 入库仓库模糊搜索的结果组
      ExpresscurrentIndex: 0, // 入库仓库搜索初始index
      ExpressList: {}, // 入库仓库下拉展示数据
      show: this.visible,
      formData: {
        expressName: [],
        logistics_number: ''
      },
      rules: {
        expressName: [
          {
            required: true,
            trigger: 'change',
            validator: (rule, value, callback) => {
              if (!(value && value.length)) {
                callback(new Error('请选择物流公司'));
              } else {
                callback();
              }
            }
          }
        ],
        logistics_number: [
          {required: true, message: '请输入物流单号', trigger: 'blur'}
        ],
      },
    };
  },

  mounted() {
  },

  methods: {
    clearDataShop() {
      this.formData.expressName = [];
    },
    // 外键下拉框搜索
    focusInputValueChangeShop(e) {
      let virtual = {
        ak: e.target.value,
        colid: 192215,
        fixedcolumns: {}
      };
      network.post('/p/cs/fuzzyquerybyak', urlSearchParams(virtual)).then((res) => {
        if (res.data.code == 0) {
          let list = [];
          res.data.data.forEach(item => {
            let obj = {
              value: item.value,
              id: item.id
            };
            list.push(obj);
          });
          this.ExpressAutoData = list;
        }
      });
    },
    // 单选下拉选中
    checkDataShop(val) {
      let list = [];
      list.push(val[0]);
      this.formData.expressName = list;
    },
    // 单选下拉模糊搜索数据
    InputValueChangeShop(e) {
      let virtual = {
        ak: e,
        colid: 196700,
        fixedcolumns: {}
      };
      network.post('/p/cs/fuzzyquerybyak', urlSearchParams(virtual)).then((res) => {
        if (res.data.code == 0) {
          let list = [];
          res.data.data.forEach(item => {
            let obj = {
              value: item.value,
              id: item.id
            };
            list.push(obj);
          });
          this.ExpressAutoData = list;
        }
      });
    },
    // 选择入库单弹框中的筛选下拉框数据start
    // 单选下拉分页改变
    changePageShop(e) {
      this.ExpresscurrentIndex = (e - 1) * 10;
      this.searchShopData();
    },
    // 外键下拉框
    searchShopData() {
      let virtual = {
        searchdata: {
          isdroplistsearch: true,
          refcolid: 196700,
          startindex: this.ExpresscurrentIndex,
          range: 10,
        }
      };
      network.post('/p/cs/QueryList', urlSearchParams(virtual)).then((res) => {
        if (res.data.code == 0) {
          this.ExpresstotalRowCount = res.data.data.totalRowCount;
          this.ExpressList = res.data.data;
          this.ExpresscurrentIndex = 0;
        }
      });
    },
    // 获取物流公司列表
    getExpressList() {
      let virtual = {
        searchdata: {
          isdroplistsearch: true,
          refcolid: 196700,
          startindex: 0,
          range: 10,
        }
      };
      network.post('/p/cs/QueryList', urlSearchParams(virtual)).then((res) => {
        if (res.data.code == 0) {
          this.ExpresstotalRowCount = res.data.data.totalRowCount;
          this.ExpressList = res.data.data;
          this.ExpresscurrentIndex = 0;
        }
      });
    },
    // 确定按钮回调
    onConfirm() {
      if (!this.formData.expressName.length || (this.formData.expressName[0] && !this.formData.expressName[0].ID)) {
        return this.$Message.warning('请选择物流公司');
      }
      if (!this.formData.logistics_number) {
        return this.$Message.warning('请输入物流单号');
      }

      this.$emit('change', false);
      this.$emit('on-confirm', this.formData);
    },
    // 处理modal关闭
    onVisibleChange(val) {
      if (!val) {
        this.$emit('change', false);
      }
    },
  },
};
</script>

<style lang="less" scoped>
</style>
<style lang="less">
.color-tag-modal {
  .ark-form-item-content {
    line-height: 26px;
  }
}
</style>
