<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"
        :data-source="data"
      >
        <template slot="operation" slot-scope="text, record">
          <a @click="showmodel(text)">任务明细</a>
        </template>
      </p-table>
    </p-card>

    <p-modal
      title="任务明细"
      width="80%"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <p-table
        ref="table"
        row-key="id"
        bordered
        :columns="config.modelcolumns"
        :rowSelectType="false"
        :data-source="Modeldata"
      />
    </p-modal>

    <p-modal
      title="任务明细"
      width="50%"
      :visible="visible1"
      :confirm-loading="confirmLoading"
      @ok="handleOk1"
      @cancel="handleCancel1"
    >
      <p-grid-form :label-col="{ span: 8 }" ref="model" :span="8" :items="modelitems" @submit="hanlderSubmit" />
    </p-modal>
  </div>
</template>

<script>
import config from './config.js'
import { addSxcaracross, selSxcaracross, getDetail, getSourceAreaNo, getTargetAreaNo, getHoistNo } from './api'
const data = []
export default {
  data() {
    return {
      Modeldata: [],
      config,
      remoteParams: {},
      data: [],
      selectmodelvisible: false,
      visible: false,
      visible1: false,
      confirmLoading: false,
      modelitems: null,
      soruceList: null,
      targetList: null,
      hoistnoList: null
    }
  },
  created() {
    getSourceAreaNo().then(res => {
      if (!res.success) {
        this.$exception(res)
        return
      }
      this.soruceList = res.data.map(item => {
        return { label: item, value: item }
      })
      console.log(this.soruceList)
      getTargetAreaNo().then(res => {
        if (!res.success) {
          this.$exception(res)
          return
        }
        this.targetList = res.data.map(item => {
          return { label: item, value: item }
        })
        console.log(this.targetList)
        getHoistNo().then(res => {
          if (!res.success) {
            this.$exception(res)
            return
          }

          this.hoistnoList = res.data.map(item => {
            console.log(item)
            return { label: item, value: item }
          })
          console.log(this.hoistnoList)
          this.modelitems = [
            {
              span: 24,
              type: 'input',
              name: 'id',
              hidden: true,
              label: 'id',
              value: ''
            },
            {
              span: 24,
              type: 'select',
              name: 'sourceArea',
              label: '源区域',
              required: true,
              options: this.soruceList
            },
            {
              span: 24,
              type: 'select',
              required: true,
              name: 'tarArea',
              label: '目标区域',
              options: this.targetList
            },
            {
              span: 24,
              type: 'select',
              name: 'hoistNo',
              label: '提升机编号',
              required: true,
              options: this.hoistnoList
            }
          ]
        })
      })
    })

    // let optAreaNoList = res.data.list.map((item) => {
    //   return { label: item.areaNo, value: item.areaNo }
    // })
    // console.log(optAreaNoList)

    this.$nextTick(() => {
      //this.$refs.editorForm.form.enableItem('typeCode')
    })
  },

  methods: {
    onChange(checkedValues) {
      console.log('checked = ', checkedValues)
      //   console.log('value = ', this.value)
    },
    hanlderSubmit(e, form) {
      e.preventDefault()
      form.validateFields((error, values) => {
        console.log(error, values, 'valuesvaluesvaluesvaluesvalues')
        if (!error) {
          this.remoteParams = { ...this.remoteParams, ...values }
        }
      })
    },
    handleOk(e) {
      this.confirmLoading = true

      this.visible = false
      this.visible1 = false
      this.confirmLoading = false
      console.log('Clicked ok button')
    },
    handleCancel(e) {
      console.log('Clicked cancel button')
      this.visible = false
      this.visible1 = false
      this.selectmodelvisible = false
    },
    handleOk1(e) {
      this.$refs.model.form.validateFields(async (err, value) => {
        if (!err) {
          console.log(value)
          this.confirmLoading = true

          //添加
          let res = await addSxcaracross(value)
          console.log(res)
          if (res.success) {
            console.log('======================')
            this.visible = false
            this.remoteParams = { ...this.remoteParams }
            this.visible = false
            this.visible1 = false
            this.confirmLoading = false
          } else {
            this.$exception(res)
          }

          this.confirmLoading = false
          //
        }
      })
    },
    handleCancel1(e) {
      console.log('Clicked cancel button')
      this.visible = false
      this.visible1 = false
      this.confirmLoading = false
      this.selectmodelvisible = false
    },

    async showmodel(data) {
      console.log(data)

      if (data) {
        this.visible = true
        let res = await getDetail({ id: data.id })
        console.log('this.Modeldata')
        // console.log(res.)
        if (res.success) {
          this.Modeldata = res.data
          console.log('this.Modeldata')
          console.log(this.Modeldata)
        } else {
          this.$exception(res)
        }
      } else {
        console.log('handleOk1')
        console.log(this.$refs)
        this.visible1 = true
        //  this.$refs.model.form.enableItem()
        // this.$nextTick(() => {
        //   this.$refs.model.form.resetFields()
        // })
        this.type = false
      }
    }
  }
}
</script>

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