<template>
  <div>
    <!-- 安全库存补货策略配置 -->
    <p-card title="安全库存补货策略配置">
      <span slot="extra">
        <p-button type="primary" style="margin-right: 10px" @click="showmodel()">添加</p-button>
      </span>
      <p-grid-form :label-col="{ span: 8 }" :span="8" :items="config.items" @submit="hanlderSubmit" />
      <p-table
        ref="table"
        row-key="id"
        bordered
        :columns="config.columns"
        :remoteUrl="config.remoteUrl"
        :remoteParams="remoteParams"
        :rowSelectType="false"
        :doneBefore="doneBefore"
        :data-source="data"
      >
        <template slot="isAvailable" slot-scope="text, record">
          <p-switch
            checked-children="开"
            un-checked-children="关"
            :default-checked="!!text"
            @change="changeSwitch(text, record)"
          />
        </template>

        <template slot="operation" slot-scope="text, record">
          <!-- {{ text ? '禁用' : '启用' }} -->
          <a @click="DetailTargetArea(text)">关联区域</a>
          <a-divider type="vertical" />
          <a @click="del(text)">删除</a>
        </template>
      </p-table>
    </p-card>

    <p-modal
      title="新增库存区域"
      width="50%"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <p-grid-form :label-col="{ span: 8 }" ref="model" :span="8" :items="config.Modelitems" @submit="hanlderSubmit" />
    </p-modal>

    <p-modal
      :title="title"
      width="50%"
      :visible="visibleTargetArea"
      :confirm-loading="confirmLoading"
      @ok="handleOkEdit"
      @cancel="handleCancel"
    >
      <p-button @click="addrow">添加</p-button>
      <p-table-edit-pro
        ref="tableEdit"
        :remoteUrl="remoteUrl"
        :remoteParams="ModelremoteParams"
        editor-row-table
        :columns="columns"
        :data-source.sync="tableData"
        :rowSelectType="false"
        :bordered="true"
      >
        <template slot="operation" slot-scope="text, record">
          <a @click="delEditTable(record)">删除</a>
        </template>
      </p-table-edit-pro>
    </p-modal>
  </div>
</template>

<script>
import config from './config.js'
import { diffOption } from '@/views/kzyWMS/utils/index.js'
import { add, deletes, update, DetailSourceAreaapi, batchUpdateStoreArea } from './api'
import { area, stationNo } from './areaNoSaerchModel'
const baseUrl = '/api/service-ai-eis-business-center-eistest'
//  {
//   // labelname = '区域', span = 24, required = true, name = 'startRegion'
//   ...area('起始区域', 6, false, 'sourceArea')
// },
export default {
  data() {
    return {
      config: config(this),
      data: [],
      type: true,
      title: '',
      columns: [
        {
          ...area('关联区域', 6, true, 'associateArea'),
        },

        {
          dataIndex: 'createTime',
          key: 'createTime',
          align: 'center',
          title: '创建时间',
          type: 'txt',
        },

        {
          title: '操作',
          key: 'operation',
          scopedSlots: { customRender: 'operation' },

          align: 'center',
        },
      ],
      remoteUrl: {
        url: baseUrl + '/storeSupply/findDetail	',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        method: 'get',
      },
      tableData: [],
      remoteParams: {
        // containerTaskTypeNo: '',
        // typeName: ''
        // startTime: '',
        // endTime: ''
      },
      ModelremoteParams: {
        storeSupplyId: '',
      },
      visible: false,
      visibleSourceArea: false,
      visibleTargetArea: false,
      confirmLoading: false,
    }
  },
  mounted() {
    // this.getinfo()
  },
  created() {
    diffOption(this.config.columns).then((res) => {
      this.config.columns = res
    })
  },
  methods: {
    //点击修改开关
    async changeSwitch(text, record) {
      console.log(text, record)
      //   text == 0 && (text = 1)
      // text == 1 && (text = 0)
      //   console.log(text, record)
      if (text == 0) {
        let res = await update({ ...record, isAvailable: 1 })
        // console.log(res)
        if (res.success) {
          this.remoteParams = { ...this.remoteParams }
        } else {
          this.$exception(res)
        }
      } else {
        let res = await update({ ...record, isAvailable: 0 })
        // console.log(res)
        if (res.success) {
          this.remoteParams = { ...this.remoteParams }
        } else {
          this.$exception(res)
        }
      }
    },
    handleOkEdit() {
      let that = this
      this.$refs.tableEdit.validateFields(async (err, value) => {
        if (!err) {
          //   value.forEach((item) => {
          //     item.associateArea = item.areaNo
          //   })
          console.log(value)
          let data = {
            storeAreaLocationDetailList: value,
            hzId: this.ModelremoteParams.storeSupplyId,
          }
          let res = await batchUpdateStoreArea(data)
          console.log(res)
          if (res.success) {
            this.visibleTargetArea = false
            this.remoteParams = { ...this.remoteParams }
          } else {
            this.$exception(res)
          }

          //   value = value.map(item => item.areaNo)
          //   console.log(value)
          //   let data = {
          //     areaList: value,
          //     id: this.Areadetails.id,
          //   }
          //   console.log(data)
          //   if (this.title == '起点区域配置') {
          //     let res = await EditSourceArea(data)
          //     if (res.success) {
          //       this.visibleArea = false
          //       this.visibleTargetArea = false

          //       this.remoteParams = { ...this.remoteParams }
          //     } else {
          //       this.$exception(res)
          //     }
          //   } else {
          //     let res = await EditTargetArea(data)
          //     if (res.success) {
          //       this.visibleArea = false
          //       this.visibleTargetArea = false
          //       this.remoteParams = { ...this.remoteParams }
          //     } else {
          //       this.$exception(res)
          //     }
          //   }
        }
      })
    },
    //添加行
    addrow() {
      this.$refs.tableEdit.createRow({ storeAreaLocId: this.ModelremoteParams.storeSupplyId })
    },
    //删除行
    delEditTable(record) {
      console.log(record, record._row_count - 1)
      this.tableData.splice(record._row_count - 1, 1)
    },
    //查看容器任务起点 详情
    async DetailSourceArea(data) {
      console.log(data)
      this.title = '起点区域配置'
      //   this.columns[0] = { ...area('区域编号', 6, true, 'areaNo') }
      this.Areadetails = data
      let res = await DetailSourceAreaapi({ id: data.id })
      console.log(res)
      if (res.success) {
        this.visibleSourceArea = true
        this.tableData = res.data
      } else {
        this.$exception(res)
      }
    },

    //查看容器任务终点 详情
    async DetailTargetArea(data) {
      console.log(data)
      this.visibleTargetArea = true
      this.ModelremoteParams.storeSupplyId = data.id
      this.ModelremoteParams = { ...this.ModelremoteParams }
      //   let res = await DetailTargetAreaapi({ id: data.id })
      //   console.log(res)
      //   if (res.success) {
      //     this.visibleTargetArea = true
      //     this.tableData = res.data
      //   } else {
      //     this.$exception(res)
      //   }
    },
    doneBefore(res) {
      //   res.data.list.forEach(item => {
      //     item.id = item.areaNo
      //   })
      console.log(res)
      return res
    },
    hanlderSubmit(e, form) {
      e.preventDefault()
      form.validateFields((error, values) => {
        console.log(error, values, 'valuesvaluesvaluesvaluesvalues')
        // this.queryName = values.name
        // this.queryType = values.type
        // this.getlistCompanyByAuthId()
        if (!error) {
          this.remoteParams = { ...this.remoteParams, ...values }
        }
      })
    },
    handleOk(e) {
      console.log(this.$refs.model)
      this.$refs.model.form.validateFields(async (err, value) => {
        if (!err) {
          console.log(value)
          this.confirmLoading = true
          if (this.type) {
            let res = await update(value)
            console.log(res)
            if (res.success) {
              this.visible = false
              this.$message.success(res.message)
              this.remoteParams = { ...this.remoteParams }
            } else {
              this.$exception(res)
              this.visible = false
            }
          } else {
            let res = await add(value)
            console.log(res)

            if (res.success) {
              this.$message.success(res.message)
              this.visible = false
              this.remoteParams = { ...this.remoteParams }
            } else {
              this.$exception(res)
              this.visible = false
            }
          }

          this.confirmLoading = false
          //
        }
      })
    },
    handleCancel(e) {
      console.log('Clicked cancel button')
      this.visible = false
      this.visibleTargetArea = false
      this.visibleSourceArea = false
    },
    //点击弹出
    showmodel(data) {
      console.log(data)
      this.visible = true
      if (data) {
        this.$nextTick(() => {
          this.$refs.model.form.setFieldsValue(data)
        })
        this.type = true
      } else {
        console.log(this.config.Modelitems)
        this.$nextTick(() => {
          this.$refs.model.form.resetFields()
        })
        this.type = false
      }
    },
    del(text) {
      let that = this
      console.log(text)
      this.$confirm({
        title: '确定是否要删除?',
        content: '',
        async onOk() {
          let res = await deletes({ id: text.id })
          if (res.success) {
            that.$message.success('删除成功')
            that.remoteParams = { ...that.remoteParams }
          } else {
            that.$exception(res)
          }
        },
        onCancel() {},
      })
    },
  },
}
</script>

<style lang="less" scoped></style>
