<template>
  <div class="manualDelivery">
    <div v-if="isSuccess">
      <div>
        <p
          style="line-height: 16px;"
          v-html="successMsg"
        />
      </div>
      <div
        class="pop-btn"
        style="display:flex;justify-content: flex-end;"
      >
        <Button
          type="fcdefault"
          class="sav-btn"
          @click="cancel"
        >
          确定
        </Button>
      </div>
    </div>
    <div v-else>
      <Form
        ref="formInline"
        :model="formInline"
        :rules="ruleValidate"
        :label-width="85"
        inline
      >
        <!-- <div class="formRow">
        <FormItem
          prop="storeName"
          label="店铺"
        >
          <Input
            v-model="formInline.storeName"
            style="width: 340px;"
            type="text"
            disabled
          />
        </FormItem>
      </div>
      <div class="formRow">
        <FormItem
          prop="PO_NO"
          label="PO编号"
        >
          <Input
            v-model="formInline.PO_NO"
            type="text"
            style="width: 340px;"
            disabled
          />
        </FormItem>
      </div> -->
        <div class="formRow">
          <FormItem
            prop="JITPOType"
            label="拣货单类型"
          >
            <Select
              v-model="formInline.JITPOType"
              clearable
              style="width:340px"
            >
              <Option
                v-for="item in JITPOTypeList"
                :key="item.value"
                :value="item.value"
              >
                {{ item.label }}
              </Option>
            </Select>
          </FormItem>
        </div>
        <div class="formRow">
          <FormItem
            prop="JITCode"
            label="JIT仓库"
          >
            <DropMultiSelectFilter
              :data="data1"
              :total-row-count="totalRowCount"
              :page-size="pageSize"
              :show-colname-key="'show'"
              :data-empty-message="dataEmptyMessage"
              :columns="columns"
              :is-back-row-item="isBackRowItem"
              :columns-key="columnsKey"
              :default-selected="defaultSelected"
              class-name="JITPODropMulti"
              @on-fkrp-selected="selectJITPO"
              @on-clear="clearChoosed"
            />
            <div
              v-if="defaultSelected.length>0"
              class="choosedList"
            >
              <!-- 已选择{{ defaultSelected.length }}个JIT仓库 -->
              <div class="defaultSelectedList">
                <div
                  v-for="(item,index) in defaultSelected"
                  :key="index"
                  class="selectedItem"
                >
                  <span>{{ item.rowItem.JITWAREHOUSENAME.val }}</span>
                  <Icon
                    type="ios-close"
                    @click="deleteJITPO(item,index)"
                  />
                </div>     
              </div>
            </div>
          </FormItem>
        </div>
      </Form>
      <div
        class="settingBtnBox"
        style="width: calc(100% + 32px);margin-left: -16px;padding-right: 16px;text-align: center;padding-top: 15px;border-top: 1px solid #DEDEDE;"
      >
        <Button
          size="small"
          class="cancelBtn"
          ghost
          @click="cancel"
        >
          取消
        </Button>
        <Button
          type="primary"
          size="small"
          class="sureBtn"
          :loading="loading"
          @click="saveManualDelivery()"
        >
          确定
        </Button>
      </div>
    </div>
  </div>
</template>

<script>
  const R3 = window.R3;

  const { network } = R3;
  export default {
    components: {},
    props: {
      selectRowData: {// 获取ID用于多选,获取勾选的明细对应的row内的数据
        type: [Array, Object],
        default: () => {}
      }
    },
    data() {
      return {
        isSuccess: false,
        successMsg: '',
        columnsKey: [],
        formInline: {
          storeName: '',
          PO_NO: '',
          JITCode: '',
          JITPOType: ''
        },
        ruleValidate: {
          JITPOType: [
            { required: true, message: '请选择拣货单类型', trigger: 'blur' }
          ],
          JITCode: [
            { required: true, message: '请选择JIT仓库', trigger: 'blur' }
          ],
        },
        JITPOTypeList: [
          {
            label: '普通拣货单',
            value: '1'
          },
          {
            label: '补货拣货单',
            value: '2'
          },
          {
            label: '预调拨拣货单',
            value: '3'
          },
        ],
        loading: false,
        data1: {
          start: 0,
          tabth: [
            {
              colname: 'ID',
              name: '编号',
              show: false
            },
            {
              colname: 'JITWAREHOUSENAME',
              name: '仓库名称',
              show: true
            },
            {
              colname: 'ADDRESS',
              name: '仓库详细地址',
              show: false
            },
            {
              colname: 'JITWAREHOUSECODE',
              name: '仓库代码',
              show: false
            },
          ],
          row: []
        },
        defaultSelected: [],
        totalRowCount: 0,
        pageSize: 1000,
        AutoData: [],
        isBackRowItem: true,
        dataEmptyMessage: '数据加载中...', // 无数据的提示
        columns: ['name', 'value'], // 展现的组
      };
    },
    created() {
      this.getJITPOList();
      this.getDetail();
    },
    methods: {
      getJITPOList() {
        let params = {
          table: 'T_V_IESJITWAREHOUSE',
          isdroplistsearch: false,
          fixedcolumns: { ISACTIVE: ['=Y'] },
          startindex: 0,
          range: 1000
        };
        network.post('/p/cs/list/query', params).then((res) => {
          // if (res.status == 200 && res.statusText == 'OK') {
          this.totalRowCount = res.data.total;
          this.data1.row = res.data.rows;
          // }
        });
      },
      getDetail() {
        this.formInline.storeName = this.selectRowData[0].SHOPID.val;
        let POList = [];
        this.selectRowData.forEach(item=>{
          POList.push(item.PO_NO.val);
        });
        this.formInline.PO_NO = POList.join(); // po单拼接
        console.log(this.selectRowData, 666);
        // this.formInline.PO_NO = this.selectRowData[0].PO_NO.val;
      },
      cancel() {
        this.$emit('closeActionDialog', true);
      },
      saveManualDelivery() {
        if (!this.formInline.JITPOType) {
          this.$Message.info('请选择拣货单类型');
          return;
        }
        if (this.defaultSelected.length == 0) {
          this.$Message.info('请选择JIT仓库');
          return;
        } 
        let warehouse = '';
        let length = this.defaultSelected.length;
        this.defaultSelected.forEach((item, index) => {
          if (index == length - 1) {
            warehouse += item.rowItem.JITWAREHOUSECODE.val;
          } else {
            warehouse += `${item.rowItem.JITWAREHOUSECODE.val},`;
          }
        });
        this.loading = true;
        let params = {
          pickFlag: this.formInline.JITPOType,  
          po: this.formInline.PO_NO,
          sellerNick: this.formInline.storeName,
          warehouse
        };
        // network.post('/p/cs/vip/createPickList', params).then((res) => {
        network.post('/p/cs/vip/create/download/pickList/bypos', params).then((res) => {
          if (res.data.code == 0) {
            // this.$Message.success('生成拣货单成功');
            // this.successMsg = res.data.data;
            this.successMsg = res.data.message;
            this.loading = false;
            this.isSuccess = true;
          } else {
            this.loading = false;
          }
        });
      },
      selectJITPO(value) {
        this.defaultSelected = value;
      },
      deleteJITPO(item, index) {
        this.defaultSelected.splice(index, 1);
      },
      clearChoosed() {
        this.defaultSelected = [];
      }
    },
  };
</script>
<style lang='less'>
  .manualDelivery .ark-form .ark-form-item {
    margin-bottom: 0px;
  }
  .manualDelivery .ark-form .ark-form-item .ark-input {
    height: 32px;
  }
  .manualDelivery .ark-fkrp-select {
    width: 340px;
  }
  .manualDelivery .ark-fkrp-select-icon {
    top: 2px;
  }
  .manualDelivery .ark-fkrp-select-icon > i {
    font-size: 16px;
  }
  .JITPODropMulti.ark-fkrp-select-popper .ark-fktable {
    width: 480px;
    max-height: 240px;
  }
  .manualDelivery .ark-fkrp-select .ark-icon-ios-close-circle {
    margin-right: 26px;
    margin-top: 4px;
  }
  .JITPODropMulti.ark-fkrp-select-popper .ark-fktable .tableSearch {
    display: none;
  }
  .manualDelivery .ark-select-single .ark-select-selection {
    height: 32px;
  }
  .manualDelivery .ark-select-single .ark-select-selection .ark-select-placeholder, .manualDelivery .ark-select-single .ark-select-selection .ark-select-selected-value {
    height: 30px;
    line-height: 30px;
  }
</style>
<style lang='less' scoped>
  .manualDelivery {
    width: 640px;
    .formRow {
      display: flex;
      justify-content: space-between;
      padding: 24px 0px 24px 0px;
      padding-left: 60px;
    }
    .formRow:nth-child(2) {
      border-bottom: 1px solid #EBE7E7;
    }
    .formRow:nth-child(2n) {
      padding-top: 0px;
    }
    .formRow:first-child {
      padding-top: 14px;
    }
    .formRow:last-child {
      border-bottom: none;
    }
    .selectedItem {
      display: inline-block;
      height: 24px;
      line-height: 16px;
      color: #333;
      padding: 4px 8px;
      margin-right: 8px;
      background: #F2F2F2;
      .ark-icon.iconios-close {
        margin-top: -2px;
      }
    }
  }
  .cancelBtn {
    width: 72px;
    height: 32px;
    border: 1px solid #DADADA;
    color: #909399;
    margin-right: 10px;
  }
  .sureBtn {
    width: 72px;
    height: 32px;
  }
</style>
