<template>
  <a-spin :spinning="confirmLoading">
    <!-- <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
      </a-form-model>
    </j-form-container> -->
    <div class="table-operator">
      <a-button @click="handleAddLine" type="primary" icon="plus">维护巡检路线</a-button>
      <a-button @click="handleAddSpot" type="primary" icon="plus">维护巡检点</a-button>
    </div>
    <div class="inspect-plan-form-list">
      <a-table
        ref="table"
        size="middle"
        rowKey="id"
        :columns="columns"
        :dataSource="tableData"
        :pagination="false"
        :rowClassName="setRowClassName"
        class="plan-table">
        <!-- :loading="loading" -->
        <template slot="expandedRowRender" slot-scope="record">
          <div v-if="record.tasktype === '巡检路线'" class="line-spot-container">
            <a-table
              size="middle"
              rowKey="id"
              :columns="spotColumns"
              :dataSource="record.inspectLineVo.detailList"
              :pagination="false"
              :showHeader="false"
              class="line-spot-table">
              <template slot="expandedRowRender" slot-scope="record">
                <div class="spot-content-container">
                  <a-table
                    size="middle"
                    rowKey="id"
                    :columns="contentColumns"
                    :dataSource="record.inspectContentList"
                    :pagination="false"
                    class="spot-content-table">
                    <template slot="expandedRowRender" slot-scope="record">
                      <div class="item-container">
                        <!-- bordered -->
                        <a-table
                          size="middle"
                          rowKey="id"
                          :columns="itemColumns"
                          :dataSource="record.cmmsInspectContentItemList"
                          :pagination="false"
                          class="item-table">
                          <!-- :showHeader="false" -->
                        </a-table>
                      </div>
                    </template>
                  </a-table>
                </div>
              </template>
            </a-table>
          </div>
          <div v-if="record.tasktype === '巡检点'" class="spot-content-container">
            <a-table
              size="middle"
              rowKey="id"
              :columns="contentColumns"
              :dataSource="record.inspectSpotVo.inspectContentList"
              :pagination="false"
              class="spot-content-table">
              <template slot="expandedRowRender" slot-scope="record">
                <div class="item-container">
                  <!-- bordered -->
                  <a-table
                    size="middle"
                    rowKey="id"
                    :columns="itemColumns"
                    :dataSource="record.cmmsInspectContentItemList"
                    :pagination="false"
                    class="item-table">
                    <!-- :showHeader="false" -->
                  </a-table>
                </div>
              </template>
            </a-table>
          </div>
        </template>
      </a-table>

      <inspect-plan-modal-add-line ref="addLineRef" :selectData="inspectLineList" @ok="handleLineOk"></inspect-plan-modal-add-line>
      <inspect-plan-modal-add-spot ref="addSpotRef" :selectData="inspectSpotList" @ok="handleSpotOk"></inspect-plan-modal-add-spot>
    </div>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import InspectPlanModalAddLine from './InspectPlanModalAddLine.vue'
  import InspectPlanModalAddSpot from './InspectPlanModalAddSpot.vue'

  export default {
    name: 'InspectPlanForm',
    components: {
      InspectPlanModalAddLine,
      InspectPlanModalAddSpot
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        inspectLineList: [],
        inspectSpotList: [],
        // model:{
        // },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
        },
        url: {
          add: "/cmmsInspectPlan/cmmsInspectPlan/add",
          edit: "/cmmsInspectPlan/cmmsInspectPlan/edit",
          queryById: "/cmmsInspectPlan/cmmsInspectPlan/queryById",
          queryTreeById: "/cmmsInspectPlan/cmmsInspectPlan/queryTreeById"
        },
        tableData: [], // 获取或页面展示的数据和格式
        columns: [
          // {
          //   title: '序号',
          //   dataIndex: '',
          //   key:'rowIndex',
          //   width:60,
          //   align:"center",
          //   customRender:function (t,r,index) {
          //     return parseInt(index)+1;
          //   }
          // },
          {
            title:'巡检类型',
            align:"center",
            dataIndex: 'tasktype'
          },
          {
            title:'名称',
            align:"center",
            // dataIndex: 'title',
            dataIndex: 'linename',
            customRender:function (t,r,index) {
              // console.log(t,r,index)
              if(r.tasktype === '巡检路线'){
                return r.inspectLineVo.linename
              }
              if(r.tasktype === '巡检点'){
                return r.inspectSpotVo.contentname
              }
            }
          },
          {
            title:'编号',
            align:"center",
            ddataIndex: 'linecode',
            customRender:function (t,r,index) {
              // console.log(t,r,index)
              if(r.tasktype === '巡检路线'){
                return r.inspectLineVo.linecode
              }
              if(r.tasktype === '巡检点'){
                return r.inspectSpotVo.contentcode
              }
            }
          },
          // {
          //   title:'是否必须执行',
          //   align:"center",
          //   dataIndex: 'equipmentname'
          // },
          {
            title:'备注',
            align:"center",
            dataIndex: 'remark',
            customRender:function (t,r,index) {
              // console.log(t,r,index)
              if(r.tasktype === '巡检路线'){
                return r.inspectLineVo.remark
              }
              if(r.tasktype === '巡检点'){
                return r.inspectSpotVo.remark
              }
            }
          }
        ],
        spotColumns: [
          {
            title:'巡检点编号',
            align:"center",
            dataIndex: 'contentcode'
          },
          {
            title:'巡检点名称',
            align:"center",
            dataIndex: 'contentname'
          },
          {
            title:'备注',
            align:"center",
            dataIndex: 'remark'
          },
        ],
        contentColumns: [
          {
            title:'巡检项目编号',
            align:"center",
            dataIndex: 'contentcode',
            // customRender: (text, row, index) => {
            //   return {
            //     children: text,
            //     attrs: {colSpan: 4}
            //   }
            // }
          },
          {
            title:'巡检项目名称',
            align:"center",
            dataIndex: 'contentname',
            // customRender: (text, row, index) => {
            //   return {
            //     children: text,
            //     attrs: {colSpan: 0}
            //   }
            // }
          },
          {
            title:'设备名称',
            align:"center",
            dataIndex: 'equipmentname',
            // customRender: (text, row, index) => {
            //   return {
            //     children: text,
            //     attrs: {colSpan: 0}
            //   }
            // }
          },
          {
            title:'备注',
            align:"center",
            dataIndex: 'remark',
            // customRender: (text, row, index) => {
            //   return {
            //     children: text,
            //     attrs: {colSpan: 0}
            //   }
            // }
          },
        ],
        itemColumns: [
          {
            title:'巡检项编号',
            align:"left",
            dataIndex: 'itemcode'
          },
          {
            title:'名称',
            align:"left",
            dataIndex: 'itemname'
          },
          // {
          //   title:'设备类型',
          //   align:"center",
          //   dataIndex: 'equipdefname'
          // },
          {
            title:'巡检标准',
            align:"left",
            dataIndex: 'inspectionstandards'
          },
          {
            title:'巡检项类型',
            align:"left",
            dataIndex: 'classification_dictText'
          },
          {
            title:'备注',
            align:"left",
            width: 80,
            dataIndex: 'remark',
          },
        ]
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      setRowClassName(record){
        if(record.tasktype === '巡检路线'){
          return 'line-bg'
        }
        if(record.tasktype === '巡检点'){
          return 'spot-bg'
        }
      },
      add () {
        // this.edit(this.modelDefault);
      },
      edit (record) {
        this.visible = true;
        this.confirmLoading = true
        // this.model = Object.assign({}, record);
        getAction(this.url.queryById, {id: record.id}).then((res) => {
          if(res.success){
            this.tableData = JSON.parse(JSON.stringify(res.result.taskList))
          } else {
            this.$message.warning(res.message);
          }
        }).finally(() => {
          this.confirmLoading = false;
        })
      },
      // 维护巡检路线
      handleAddLine(){
        this.inspectLineList = this.tableData.filter(item => item.tasktype === '巡检路线').map(i => i.inspectLineVo)
        console.log(this.inspectLineList)
        this.$refs.addLineRef.add();
        this.$refs.addLineRef.title = "选择巡检路线";
      },
      handleLineOk(data){
        // console.log('ok-data', data) // 新获取的巡检路线数据
        this.inspectLineList = this.tableData.filter(item => item.tasktype === '巡检路线').map(i => i.inspectLineVo)
        // 为什么不写上面那一步，直接调用数据会变成data
        // console.log('inspectLineList', this.inspectLineList) // 原来巡检路线数据
        
        // 添加--获取最新巡检路线数据中原来巡检点没有的数据
        var addData = data.filter(item => !this.inspectLineList.some(i=>i.id === item.id))
        console.log(addLines)
        var addLines = addData.map(item=>{
          return {
            inspectLineVo: item, // 不需要传给后端，前端显示用的
            tasktype: '巡检路线', // 需要传后端的
            ifmustexec: 1, // 需要传后端的
            relid: item.id, // 需要传后端的(所选择的巡检路线或巡检点的真正id)
          }
        })
        this.tableData.push(...addLines)
        // 删除--原来的数据最新的数据中没有了
        var delLines = this.inspectLineList.filter(item => !data.some(i=>i.id === item.id))
        console.log('delLines', delLines)
        
        delLines.forEach(item => {
          var i = this.tableData.findIndex(t => t.tasktype === '巡检路线' && t.inspectLineVo.id === item.id)
          this.tableData.splice(i, 1)
        });

        console.log(this.tableData)
      },
      // 维护巡检点
      handleAddSpot(){
        this.inspectSpotList = this.tableData.filter(item => item.tasktype === '巡检点').map(i => i.inspectSpotVo)
        this.$refs.addSpotRef.add();
        this.$refs.addSpotRef.title = "选择巡检点";
        console.log(this.inspectSpotList)
      },
      handleSpotOk(data){
        // console.log(data) // 新获取的巡检点数据
        // console.log(this.inspectSpotList) // 原来巡检点数据
        this.inspectSpotList = this.tableData.filter(item => item.tasktype === '巡检点').map(i => i.inspectSpotVo)
        // 添加--获取最新巡检点数据中原来巡检点没有的数据
        var addData = data.filter(item => !this.inspectSpotList.some(i=>i.id === item.id))
        console.log(addSpots)
        var addSpots = addData.map(item=>{
          return {
            inspectSpotVo: item, // 不需要传给后端，前端显示用的
            tasktype: '巡检点', // 需要传后端的
            ifmustexec: 1, // 需要传后端的
            relid: item.id, // 需要传后端的(所选择的巡检路线或巡检点的真正id)
          }
        })
        this.tableData.push(...addSpots)
        // 删除--原来的数据最新的数据中没有了
        var delSpots = this.inspectSpotList.filter(item => !data.some(i=>i.id === item.id))
        console.log('delSpots', delSpots)
        
        delSpots.forEach(item => {
          var i = this.tableData.findIndex(t => t.tasktype === '巡检点' && t.inspectSpotVo.id === item.id)
          this.tableData.splice(i, 1)
        });

        // this.tableData.filter(item => item.tasktype === '巡检路线' || (item.tasktype === '巡检点' && !delSpots.some(i=>i.id === item.inspectSpotVo.id)))
        console.log(this.tableData)
      },
    }
  }
</script>
<style lang="less" scoped>
  .inspect-plan-form-list{
    .plan-table{
      /deep/ .line-bg{
        background-color: #f5f2eb; // 黄色
      }
      /deep/ .spot-bg{
        background-color: #ecf3ef; // 绿色
        // background-color: #e6f7ff; // 蓝色
      }
    }
    // 巡检路线下的巡检点
    /deep/ .line-spot-container{
      // background-color: #fff;
      border: 1px solid #e6ebf5;
      // padding: 20px;
      .line-spot-table{
        background-color: #ecf3ef;
        // tr > td{
        //   border: none;
        // }
      }
    }
    .line-spot-container:hover{
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    }
    // 巡检点下的巡检项目
    /deep/ .spot-content-container{
      background-color: #fff;
      border: 1px solid #e6ebf5;
      padding: 20px;
      .spot-content-table{
        background-color: #e6f7ff;
        // tr > td{
        //   border: none;
        // }
      }
      .item-container{
        background: #fff;
        padding: 20px;
        border: 1px solid #e6ebf5;
        .item-table{
        }
      }
    }
    .spot-content-container:hover{
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    }
    // 表格悬浮颜色
    /deep/ tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td{
      background-color: rgba(255,255,255,.4);
    }
  }
</style>