<template>
  <div
    id="element-main"
    class="JITXChangeWMS"
  >
    <Spin
      v-if="loading"
      fix
    >
      <div class="loader">
        <svg
          class="circular"
          viewBox="25 25 50 50"
        >
          <circle
            class="path"
            cx="50"
            cy="50"
            r="20"
            fill="none"
            stroke-width="5"
            stroke-miterlimit="10"
          />
        </svg>
      </div>
      <div>加载中...</div>
    </Spin>
    <Form
      v-else
      ref="formModel"
      :model="formModel"
      :rules="formRule"
      label-position="top"
    >
      <FormItem
        label="请选择唯品仓"
        prop="jitxworehouse"
      >
        <Select
          v-model="formModel.jitxworehouse"
          filterable
        >
          <Option
            v-for="item in JITXWMSlist"
            :key="item.ID.val"
            :value="item.ID.val"
          >
            {{ item.WAREHOUSENAME.val }}
          </Option>
        </Select>
      </FormItem>
    </Form>
    <businessButton :btn-config="btnConfig" />
  </div>
</template>

<script lang="js">
  import businessButton from 'professionalComponents/businessButton';

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

  export default {
    name: 'JITXChangeWMS',
    components: {
      businessButton
    },
    props: {
      externalOptions: {
        type: Object,
        default: ()=>{}
      },
    },
    created() {
      this.loading = false;
      this.getJITXWarehouse();
    },
    data() {
      return {
        loading: false,
        message: '',
        selectRows: [], // 重新查询得来的
        JITXWMSlist: [],
        formModel: {
          jitxworehouse: ''
        },
        formRule: {
          jitxworehouse: [
            { required: true, message: '请选择唯品仓', trigger: 'blur' }
          ]
        },
        btnConfig: {
          typeAll: 'error', // 按钮统一风格样式
          btnsite: 'right', // 按钮位置 (right , center , left)
          buttons: [
            {
              type: '', // 按钮类型
              text: '取消', // 取消 按钮文本
              icon: '', // 按钮图标
              size: '', // 按钮大小
              disabled: false, // 按钮禁用控制
              btnclick: () => {
                this.closeDialog();
              } // 按钮点击事件
            },
            {
              type: '', // 按钮类型
              text: '确定', // 按钮文本
              icon: '', // 按钮图标
              size: '', // 按钮大小
              disabled: false, // 按钮禁用控制
              btnclick: () => {
                this.submit();
              }, // 按钮点击事件
            }
          ]
        }
      };
    },
    computed: {

    },
    methods: {
      getJITXWarehouse() {
        let virtual = {
          searchdata: {
            table: 'T_IESWAREHOUSE', // T_V_IESJITWAREHOUSE
            startindex: 0,
            range: 1000,
            fixedcolumns: {},
            column_include_uicontroller: true,
            isolr: false 
          }
        };
        network.post('/p/cs/QueryList', urlSearchParams(virtual)).then((res) => {
          if (res.data.code == 0) {
            this.JITXWMSlist = res.data.data.row;
          }
        });
      },
      submit() {
        if (this.externalOptions.type == '1') {
          let params = {
            ids: this.externalOptions.selectRowData,
            changeWarehouseId: this.formModel.jitxworehouse
          };
          network.post('/p/cs/jit/warehouse/change', params).then(res => {
            if (res.data.code == 0) {
              if (res.data.data) {
                this.$Modal.fcWarning({
                  title: '提示',
                  mask: true,
                  showCancel: false,
                  content: res.data.data,
                });
              } else {
                this.$Message.success('操作成功');
              }
              this.closeDialog();
            }
          });
        } else if (this.externalOptions.type == '2') {
          let params = {
            ids: this.externalOptions.selectRowData,
            changeWarehouseId: this.formModel.jitxworehouse
          };
          network.post('/p/cs/jit/warehouse/forcedchange', params).then(res => {
            if (res.data.code == 0) {
              if (res.data.data) {
                this.$Modal.fcWarning({
                  title: '提示',
                  mask: true,
                  showCancel: false,
                  content: res.data.data,
                });
              } else {
                this.$Message.success('操作成功');
              }
            }
            this.closeDialog();
          });
        }
      },
      setTitle(title) {
        this.$emit('setTitle', title);
      },
      closeDialog() {
        document.querySelector('#refresh').click(); // 标准列表刷新按钮
        this.$emit('cancel');
      }
    }
  };
</script>
<style lang = 'less'>
.JITXChangeWMS .ark-select-single .ark-select-selection {
  height: 32px;
}
</style>
<style scoped>
  #element-main {
    width: 600px;
  }
  .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
        height: 100px;
        /* position: relative; */
        border: 1px solid #eee;
    }
</style>
