<template>
  <div class="patrol_config_detail" v-loading="detailsLoading">
    <div class="main_content">
      <!-- 基本信息 -->
      <div class="base_info">
        <HeaderTitle title="基本信息" size="16px"></HeaderTitle>
        <el-row class="base_info_content">
          <el-col :span="6">
            <span>计划单号：</span>
            <span>{{ detailsForm.code }}</span>
          </el-col>
          <el-col :span="6">
            <span>巡点检名称：</span>
            <span>{{ detailsForm.name }}</span>
          </el-col>
          <el-col :span="6">
            <span>巡点检部门：</span>
            <span>{{ detailsForm.groupName }}</span>
          </el-col>
          <el-col :span="6">
            <span>：</span>
            <span>{{ detailsForm.executorName }}</span>
          </el-col>
          <el-col :span="6">
            <span>计划完成时长：</span>
            <span>{{ detailsForm.duration }}分钟</span>
          </el-col>
          <el-col :span="6">
            <span>设备分类：</span>
            <span>{{ detailsForm.categoryName }}</span>
          </el-col>
          <el-col :span="6">
            <span>规则名称：</span>
            <span>{{ detailsForm.ruleName }}</span>
          </el-col>
          <!--          <el-col :span="6">
            <span>创建部门：</span>
            <span>{{ detailsForm.createOrgName }}</span>
          </el-col> -->
          <el-col :span="6">
            <span>创建人：</span>
            <span>{{ detailsForm.createUserName }}</span>
          </el-col>
          <el-col :span="6">
            <span>创建时间：</span>
            <span>{{ detailsForm.createTime }}</span>
          </el-col>
          <el-col :span="6">
            <span>审核人：</span>
            <span>{{ detailsForm.approvalUserName }}</span>
          </el-col>
          <el-col :span="24">
            <span>备注：</span>
            <span>{{ detailsForm.remark }}</span>
          </el-col>
        </el-row>
      </div>
      <!-- 巡点检设备 -->
      <div class="patrol_equipment_info">
        <HeaderTitle title="巡点检设备" size="16px"></HeaderTitle>
        <div class="patrol_equipment_info_content">
          <div
            class="equipment_item"
            v-for="item in detailsForm.deviceInfo"
            :key="item.id"
          >
            <div class="equipment_info">
              <div class="item_info">
                <span class="item_label">设备编码</span>
                <span class="item_value">{{ item.substance.code }}</span>
              </div>
              <div class="item_info">
                <span class="item_label">设备名称</span>
                <span class="item_value">{{ item.substance.name }}</span>
              </div>
              <div class="item_info">
                <span class="item_label">设备型号</span>
                <span class="item_value">{{ item.substance.model }}</span>
              </div>
              <div class="item_info">
                <span class="item_label">设备位置</span>
                <span class="item_value">{{
                  item.substance.positionNames
                }}</span>
              </div>
            </div>
            <p>操作事项</p>
            <div class="matter_info">
              <el-table :data="matterRulesList" border>
                <el-table-column label="序号" align="center" width="80">
                  <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="事项" prop="name" />
                <el-table-column label="内容" prop="content" />
                <el-table-column label="标准" prop="norm" />
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getInfoById } from '@/api/ruleManagement/plan';
  import { getDetail } from '@/api/ruleManagement/matter';
  export default {
    name: 'patrolConfigDetail',
    data() {
      return {
        detailsLoading: false,
        detailsForm: {},
        matterRulesList: []
      };
    },
    mounted() {
      this.getDetailsData(this.$route.query.id);
    },
    computed: {},
    methods: {
      // 获取详情数据
      async getDetailsData(id) {
        this.detailsLoading = true;
        getInfoById(id)
          .then((res) => {
            this.detailsLoading = false;
            console.log('====res', res);
            this.detailsForm = res;
            let arr = [];
            res.execute.map((item) => {
              arr.push(item.userName);
            });
            this.$set(this.detailsForm, 'executorName', arr.join(','));
            this._getMatterRulesDetails(res.ruleId);
          })
          .catch(() => {
            this.detailsLoading = false;
          });
      },

      // 封装 - 获取规则下面的详情数据及事项
      async _getMatterRulesDetails(val) {
        const res = await getDetail(val);
        this.matterRulesList = res.ruleItems;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .patrol_config_detail {
    padding: 5px 0;
    .detail_title {
      display: flex;
      height: 40px;
      align-items: center;
      justify-content: space-between;
      > span {
        background-color: #fff;
        line-height: 40px;
        width: 90px;
        text-align: center;
        border-top: 4px solid #157a2c;
      }
    }
    .main_content {
      background-color: #fff;
      padding: 20px 40px;
      .base_info {
        .base_info_title {
          border-bottom: 1px solid #1890ff;
          padding-bottom: 3px;
          margin-bottom: 20px;
          > span {
            display: inline-block;
            line-height: 16px;
            border-left: 6px solid #1890ff;
            padding-left: 6px;
          }
        }
        .base_info_content {
          padding: 0 60px;
          font-size: 14px;
          ::v-deep .el-col {
            margin-bottom: 20px;
            > span:first-child {
              font-weight: 700;
            }
          }
        }
      }
      .patrol_equipment_info {
        .patrol_equipment_info_title {
          border-bottom: 1px solid #1890ff;
          padding-bottom: 3px;
          margin-bottom: 20px;
          > span {
            display: inline-block;
            line-height: 16px;
            border-left: 6px solid #1890ff;
            padding-left: 6px;
          }
        }
        .patrol_equipment_info_content {
          padding: 0 30px;
          .equipment_item {
            border: 1px solid #ccc;
            font-size: 14px;
            padding: 15px;
            margin-bottom: 30px;
            .equipment_info {
              display: flex;
              flex-wrap: wrap;
              border: 1px solid #ddd;
              .item_info {
                width: 33.33%;
                height: 24px;
                line-height: 24px;
                display: flex;
                .item_label {
                  width: 90px;
                  text-align: center;
                  background-color: #f2f2f2;
                  font-weight: 700;
                }
                .item_value {
                  border-bottom: 1px solid #f2f2f2;
                  flex: 1;
                  padding-left: 5px;
                }
                &:last-child {
                  width: 100%;
                  .item_value {
                    border: 0;
                  }
                }
              }
            }
            > p {
              margin-top: 20px;
              color: #797979;
            }
            .matter_info {
              ::v-deep .el-table {
                th.el-table__cell {
                  background-color: #f2f2f2;
                  padding: 0;
                }
                td.el-table__cell {
                  padding: 0;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
