<template>
  <div>
    <!-- 订单页面 -->
    <p-card title="历史订单页面">
      <p-grid-form :label-col="{ span: 8 }" :span="8" :items="config.items" @submit="hanlderSubmit" />
      <p-table
        ref="table"
        row-key="id"
        bordered
        :doneBefore="doneBefore"
        :columns="config.columns"
        :remoteUrl="config.remoteUrl"
        :remoteParams="remoteParams"
        :rowSelectType="false"
        :data-source="data"
      >
        <template slot="operation" slot-scope="text, record">
          <a @click="showdetail(text)">查看明细</a>
        </template>
      </p-table>
    </p-card>

    <p-modal
      title="明细"
      width="50%"
      :visible="visibleErrinfo"
      :confirm-loading="confirmLoading"
      @ok="visibleErrinfo = false"
      @cancel="handleCancel"
    >
      <div>
        <a-descriptions bordered>
          <a-descriptions-item v-for="(item, index) in config.details" :key="index" :label="item">
            {{ detailData[index] }}
            <!-- {{ Object.keys(config.details) }} -->
            <!-- {{ index }} -->
            <!-- {{ detailData.capacity }} -->
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </p-modal>
  </div>
</template>

<script>
import config from './config.js'
import { diffOption } from '@/views/kzyWMS/utils'
import { orderPriority, findAlldetail } from './api'

export default {
  data() {
    return {
      config,
      data: [],
      detailData: {},
      type: true,
      remoteParams: {},
      visible: false,
      visibleErrinfo: false,
      errinfo: {},
      confirmLoading: false,
    }
  },
  mounted() {
    // this.getinfo()
  },
  created() {
    diffOption(this.config.columns).then((res) => {
      this.config.columns = res
    })
  },
  methods: {
    //查看明细
    async showdetail(record) {
      console.log(record)
      try {
        let res = await findAlldetail({ wmsTaskId: record.wmsTaskId })
        if (res.success) {
          res.data[0].sfShap ? (res.data[0].sfShap = '标准') : (res.data[0].sfShap = '异形')
          res.data[0].status ? (res.data[0].status = '创建') : (res.data[0].status = '取消')
          this.detailData = res.data[0]
          this.visibleErrinfo = true
        } else {
          this.$exception(res)
        }
      } catch (error) {
        this.$exception(error)
      }
      //   this.visibleErrinfo = true
    },
    onChange(e, text, record) {
      console.log(e, text, record)
      //   console.log(`p-switch to ${checked}`)
      this.changeisAvailable(e, record)
    },
    //修改是否可用
    async changeisAvailable(data, record) {
      //   console.log(data)
      if (data) {
        data = 1
      } else {
        data = 0
      }
      //   console.log(data, record)
      let datas = {
        ...record,
        isAvailable: data,
        id: record.id,
      }
      console.log(datas)
      let res = await update(datas)
      if (res.success) {
        console.log(this.$message)
        this.$message.success(res.message)
        this.remoteParams = { ...this.remoteParams }
      } else {
        this.$exception(res)
      }
    },
    async showinfo(record) {
      console.log(record)
      let res = await deviceInfo({ deviceNo: record.deviceNo })
      console.log(res)
      if (res.success) {
        this.errinfo = res.data
        this.visibleErrinfo = true
      }
    },
    doneBefore(res) {
      res.data.list.forEach((item) => {
        // item.id = item.deviceNo
      })
      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) {
      this.$refs.model.form.validateFields(async (err, value) => {
        if (!err) {
          console.log(value)
          this.confirmLoading = true
          try {
            let res = await orderPriority(value)
            if (res.success) {
              this.$message.success(res.message)
              this.remoteParams = { ...this.remoteParams }
            } else {
              this.$exception(res)
            }
            this.visible = false
          } catch (error) {
            this.$exception(error)
            this.visible = false
          }

          this.confirmLoading = false
          //
        }
      })
    },
    handleCancel(e) {
      console.log('Clicked cancel button')
      this.visible = false
      this.visibleErrinfo = false
    },
    //点击弹出
    showmodel(data) {
      console.log(data)
      this.visible = true

      if (data) {
        this.$nextTick(() => {
          this.config.Modelitems.forEach((item) => {
            if (data.isAvailable) {
              item.disabled = true
              item.name == 'isAvailable' && (item.disabled = false)
            } else {
              item.disabled = false
            }
            // item.name == 'areaType' && (item.disabled = true)
          })
          this.$refs.model.form.setFieldsValue(data)
        })
        this.type = true
      } else {
        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>
.errinfo {
  padding: 10px;
  width: 100%;
  height: 200px;
  line-height: 50px;
  font-size: 20px;
  color: #fff;
  font-weight: bolder;
  text-align: center;
  background: rgb(145, 143, 144);
}
</style>
