<template>
  <div>
    <!-- 自动化测试策略配置 -->
    <p-card title="自动化测试策略配置">
      <span slot="extra">
        <p-button type="primary" style="margin-right: 10px" @click="showmodel()">添加</p-button>
        <p-button type="primary" style="margin-right: 10px" @click="ContainerOn()">容器上架</p-button>
        <p-button type="primary" style="margin-right: 10px" @click="ContainerOut()">容器下架</p-button>
        <p-button type="primary" style="margin-right: 10px" @click="initiatorTask()">发起搬运任务</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
        :doneBefore="doneBefore"
        :columns="config.columns"
        :remoteUrl="config.remoteUrl"
        :remoteParams="remoteParams"
        :rowSelectType="false"
        :data-source="data"
      >
        <template slot="operation" slot-scope="text, record">
          <!-- {{ text ? '禁用' : '启用' }} -->
          <a @click="showmodel(text)">策略管理</a>
          <a-divider type="vertical" />
          <a v-if="!text.isAvailable" @click="del(text)">删除</a>
          <span v-else>删除</span>
        </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" />
    </p-modal>

    <p-modal
      title="错误信息"
      width="50%"
      :visible="visibleErrinfo"
      :confirm-loading="confirmLoading"
      @ok="visibleErrinfo = false"
      @cancel="handleCancel"
    >
      <div class="errinfo">
        {{ errinfo.errorInfo || '暂无' }}
      </div>
    </p-modal>

    <p-modal
      title="容器上架"
      width="50%"
      :visible="visibleContainerOn"
      :confirm-loading="confirmLoading"
      @ok="hanlderSubmitModel('ContainerOnmodel')"
      @cancel="handleCancel"
    >
      <p-grid-form :label-col="{ span: 8 }" ref="ContainerOnmodel" :span="8" :items="config.ContainerOnModelitems" />
    </p-modal>
    
    <p-modal
      title="容器下架"
      width="50%"
      :visible="containerOutIsShow"
      :confirm-loading="confirmLoading"
      @ok="hanlderSubmitModel('containerOut')"
      @cancel="handleCancel"
    >
      <p-grid-form :label-col="{ span: 8 }" ref="containerOut" :span="8" :items="config.containerOutModelitems">
        <div slot="diy" slot-scope="value" style="margin: 0">
                {{ value }}
        </div>
      </p-grid-form>
    </p-modal>

    <p-modal
      title="发起搬运任务"
      width="50%"
      :visible="visibleinitiatorTask"
      :confirm-loading="confirmLoading"
      @ok="hanlderSubmitModel('initiatorTaskmodel')"
      @cancel="handleCancel"
    >
      <p-grid-form
        :label-col="{ span: 8 }"
        ref="initiatorTaskmodel"
        :span="8"
        :items="config.initiatorTaskModelitems"
      />
    </p-modal>
  </div>
</template>

<script>
import config from './config.js'
import { diffOption } from '@/views/kzyWMS/utils/index.js'

import { add, deletes, update, CredelContainer,credelContainerOut, CreateTaks } from './api'
export default {
  data() {
    return {
      config: config(this),
      data: [],
      type: true,
      remoteParams: {
        isAvailable: '',
        sourceArea: '',
        targetArea: '',
        taskCount: '',
        taskType: '',
      },
      visible: false,
      visibleErrinfo: false,
      visibleContainerOn: false,
      containerOutIsShow:false,
      visibleinitiatorTask: false,
      errinfo: {},
      confirmLoading: false,
    }
  },
  mounted() {
    // this.getinfo()
  },
  created() {
    diffOption(this.config.columns).then((res) => {
      this.config.columns = res
    })
  },
  methods: {
    hanlderSubmitModel(name) {
      this.$refs[name].form.validateFields(async (err, value) => {
        if (!err) {
          console.log(value)
          if (name == 'ContainerOnmodel') {
            let res = await CredelContainer(value)
            console.log(res)
            if (res.success) {
              this.$message.success(res.message)
              this.$refs.ContainerOnmodel.form.resetFields();
            } else {
              this.$exception(res)
            }
          }else if (name == 'containerOut') {
            let res = await credelContainerOut(value)
            console.log(res)
            if (res.success) {
              this.$message.success(res.message)
              this.$refs.ContainerOnmodel.form.resetFields();
            } else {
              this.$exception(res)
            }
          } else {
            let res = await CreateTaks(value)
            console.log(res)
            if (res.success) {
              this.$message.success(res.message)
              this.visible = false;
            } else {
              this.$exception(res)
            }
          }
        }
      })
    },
    //容器上架 弹窗
    ContainerOn() {
      this.visibleContainerOn = true
      this.$nextTick(() => {
        this.$refs.ContainerOnmodel.form.resetFields();
      })
    },
    //容器下架 弹窗
    ContainerOut() {
      this.containerOutIsShow = true
      this.$nextTick(() => {
        this.$refs.containerOut.form.resetFields();
      })
    },
    //发起搬运任务
    initiatorTask() {
      this.visibleinitiatorTask = true
      this.$nextTick(() => {
        this.$refs.initiatorTaskmodel.form.resetFields()
      })
    },

    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) {
      console.log(arguments)
      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
          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.visible = false
              this.$message.success(res.message)
              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.visibleErrinfo = false
      this.visibleContainerOn = false
      this.containerOutIsShow = false
      this.visibleinitiatorTask = false
    },
    //点击弹出
    showmodel(data) {
      console.log(data)
      this.visible = true

      if (data) {
        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.$nextTick(() => {
          this.$refs.model.form.setFieldsValue(data)
        })
        this.type = true
      } else {
        this.config.Modelitems.forEach((item) => {
          item.disabled = false
        })
        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>
