<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"
        :scroll="{ x: 1000 }"
      >
        <template slot="operation" slot-scope="text, record">
          <!-- {{ text ? '禁用' : '启用' }} -->
          <a @click="showmodel(text)">修改</a>
          <a-divider type="vertical" />
          <a @click="showmodelrelation(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="子区域备选维护"
      width="50%"
      :visible="visiblerelation"
      :confirm-loading="confirmLoading"
      @ok="handleOkEdit"
      @cancel="handleCancel"
    >
      <p-button @click="addrow">添加</p-button>
      <p-table-edit-pro
        ref="tableEdit"
        auto-width
        dragle
        editor-row-table
        :columns="columns"
        :data-source.sync="tableData"
        :rowSelectType="false"
        :bordered="true"
        :scroll="{ x: 1500 }"
      >
        <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 { add, deletes, update, subAreasubAreaBp, subAreaBp } from './api'
const baseUrl = '/api/upcloud-base-wh-dev-mysql-eistest'
export default {
  data() {
    return {
      config,
      data: [],
      subAreaId: '',
      columns: [
        // {
        //   type: 'edit',
        //   dataIndex: 'alternateSubAreaId',
        //   title: '备选子区域',
        //   width: 200,
        //   required: true
        // },
        {
          title: '备选子区域',
          type: 'searchModal',
          required: true,
          dataIndex: 'alternateSubAreaId',
          width: 200,
          targetClick: true,
          targetValueKey: 'subAreaNo',
          //   alternateSubAreaId
          remoteUrl: {
            url: baseUrl + '/eisWhSubArea/getAll-subArea',
            headers: {
              'Content-Type': 'application/JSON',
            },
            method: 'get',
          },

          toolBar: {
            rowId: 'id',
            items: [
              {
                span: 8,
                type: 'input',
                name: 'subAreaNo',
                label: '子区域编号',
                value: '',
              },
              {
                span: 8,
                type: 'input',
                name: 'areaNo',
                label: '区域编号',
                value: '',
              },
            ],
          },
          // on: {
          //   search: () => {
          //     this.remoteParams = { name: "hdw" };
          //   },
          // },
          tableConfig: {
            rowKey: 'id',
            columns: [
              {
                dataIndex: 'subAreaNo',
                key: 'subAreaNo',
                align: 'center',
                title: '子区域编号',
              },
              {
                title: '区域编号',
                dataIndex: 'areaNo',
                align: 'center',
                key: 'areaNo',
              },
              {
                title: '锚点x',
                dataIndex: 'x',
                align: 'center',
                key: 'x',
              },
              {
                title: '锚点y',
                key: 'y',
                dataIndex: 'y',
                align: 'center',
              },
              {
                title: '锚点z',
                dataIndex: 'z',
                align: 'center',
                key: 'z',
              },
            ],
          },
        },
        {
          type: 'number',
          dataIndex: 'priority',
          title: '优先级',
          width: 200,
          required: true,
        },
        {
          type: 'txt',
          dataIndex: 'subAreaId',
          title: '子区域ID',
          width: 200,
          //   required: true
        },
        {
          title: '操作',
          key: 'operation',
          scopedSlots: { customRender: 'operation' },

          align: 'center',
        },
      ],
      tableData: [],
      type: true,
      remoteParams: {
        subAreaNo: '',
        areaNo: '',
      },
      visible: false,
      visiblerelation: false,
      confirmLoading: false,
    }
  },
  mounted() {
    // this.getinfo()
  },
  methods: {
    //添加行
    addrow() {
      this.$refs.tableEdit.createRow({ subAreaId: this.subAreaId })
    },
    //删除行
    delEditTable(record) {
      console.log(record, record._row_count - 1)
      this.tableData.splice(record._row_count - 1, 1)
    },
    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 }
        }
      })
    },
    handleOkEdit() {
      let that = this
      this.$refs.tableEdit.validateFields(async (err, value) => {
        if (!err) {
          value = value.map((item) => {
            return {
              alternateSubAreaId: item.alternateSubAreaId,
              priority: item.priority,
              subAreaId: item.subAreaId,
            }
          })
          console.log(value)

          let data = {
            subAreaBp: value,
            subAreaId: that.subAreaId,
          }
          console.log(data)
          let res = await subAreaBp(data)
          console.log(res)
          if (res.success) {
            this.visiblerelation = false
            this.$message.success(res.message)
            this.remoteParams = { ...this.remoteParams }
          } else {
            this.$exception(res)
            this.visiblerelation = false
          }
        }
      })
    },
    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.visible = false
              this.$exception(res)
            }
          } 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.visible = false
              this.$exception(res)
            }
          }

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

      if (data) {
        this.config.Modelitems.forEach((item) => {
          item.name == 'subAreaNo' && (item.disabled = true)
          item.name == 'areaNo' && (item.disabled = true)
        })

        this.$nextTick(() => {
          this.$refs.model.form.setFieldsValue(data)
          this.$refs.model.form.setFieldsValue(data)
        })
        this.type = true
      } else {
        this.config.Modelitems.forEach((item) => {
          item.name == 'subAreaNo' && (item.disabled = false)
          item.name == 'areaNo' && (item.disabled = false)
        })
        this.$nextTick(() => {
          this.$refs.model.form.resetFields()
        })
        this.type = false
      }
    },
    //业务关系维护
    async showmodelrelation(data) {
      console.log(data)
      this.subAreaId = data.id
      let res = await subAreasubAreaBp({ subAreaId: data.id })
      console.log(res)
      if (res.success) {
        this.tableData = res.data
        this.visiblerelation = true
      } else {
        this.$exception(res)
      }
    },

    del(text) {
      let that = this
      console.log(text)
      this.$confirm({
        title: '确定是否要删除?',
        content: '',
        async onOk() {
          let res = await deletes({ subAreaId: text.id })
          if (res.success) {
            that.$message.success('删除成功')
            that.remoteParams = { ...that.remoteParams }
          } else {
            that.$exception(res)
          }
        },
        onCancel() {},
      })
    },
  },
}
</script>

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