<template>
  <el-dialog title="监督指导列表" :visible.sync="visible" width="75%" v-dialogDrag :close-on-click-modal="false"
    :before-close="cancel" top="20px">
    <div>
      <el-descriptions :column="4" border>
        <!-- <template slot="extra">
          <el-button type="primary" size="small">操作</el-button>
        </template> -->
        <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="文件类型:">
          <span class="contentSpan" v-if="superviseList.length">
            {{superviseList[0].fileType}}
          </span>
          <!-- <el-tag > </el-tag> -->
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="指导个数:">
          <!-- <el-tag type="success" effect="dark"> </el-tag> -->
          <span class="contentSpan" style="color:#0004ff">
            {{superviseList.length}}
          </span>
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="全宗号:">
          <!-- <el-tag type="success" effect="dark"> {{superviseList[0].fonds_no}}</el-tag> -->
          <span class="contentSpan" v-if="superviseList.length">
            {{superviseList[0].fondsNo}}
          </span>
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="指导时间:">
          <!-- <el-tag type="success" effect="dark"> </el-tag> -->
          <span class="contentSpan" v-if="superviseList.length">
            {{superviseList[0].fileDate}}
          </span>
        </el-descriptions-item>
      </el-descriptions>
      <el-table :data="superviseList" border tooltip-effect="dark" size="mini">
        <el-table-column v-for="(item,key) in arrList" :key="key" align="cenetr"
          :width="item.value | widthTransformation">
          <!-- <div v-for="(ele,index) in superviseList" :key="index"> -->
          <!-- <template slot-scope="scope" >
                 <div>{{scope.row.dirContent}}</div>
                 </template> -->
          <!-- <el-input v-model="ele[key]"></el-input> -->
          <!-- </div> -->
          <template slot="header">
            <div style="text-align:center">
              {{item.name}}
            </div>
          </template>
          <template slot-scope="scope">
            <div v-if="item.name==='档号' ||  item.name==='题名'">{{scope.row[item.value]}}</div>
            <el-input size="small" v-if="item.name==='指导人'" v-model="scope.row[item.value]" clearable></el-input>
            <el-input size="small" v-if="item.name==='指导内容'" v-model="scope.row[item.value]" type="textarea" :rows="1"
              clearable>
            </el-input>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-descriptions :column="4" border direction="vertical">
        <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="档号">

        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="题名">
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="指导人">
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="指导内容">
        </el-descriptions-item>
      </el-descriptions>

      <el-card :body-style="{ padding: ' 15px 0' }">
        <div v-for="(item,index) in superviseList" :key="index" class="formZD">
          <div class="formOne">
            <div class="labelDh">
              档号：
            </div>
            <el-tooltip class="item" effect="dark" :content="item.archive_no" placement="top-start">
              <el-input v-model="item.archive_no" disabled></el-input>
            </el-tooltip>
          </div>
          <div class="formTwo">
            <div class="labelTitle">题名：</div>
            <el-tooltip class="item" effect="dark" :content="item.fileTitle" placement="top-start">
              <el-input v-model="item.fileTitle" disabled></el-input>

            </el-tooltip>
          </div>
          <div class="formThree">
            <div class="labelMen">指导人：</div>
            <el-input v-model="item.director" clearable></el-input>
          </div>
          <div class="formFour">
            <div class="labelContent">指导内容：</div>
            <el-input v-model="item.dirContent" type="textarea" :rows="1" placeholder="请输入内容">
            </el-input>

          </div>
        </div>
      </el-card> -->
      <div style="text-align:center;padding:10px 0 5px 0">
        <el-button @click="submit" v-loading="btnLoading" size="mini" type="primary">保存</el-button>
        <el-button @click="cancel" size="mini" type="info">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
  import {
    addSuperviseGuide
  } from "@/api/archives-management/fileManagement/dataBrowsing"
  import {
    message
  } from '@/utils/common';
  export default {
    name: 'supervise',
    props: {
      visible: {
        type: Boolean,
        default: () => false
      },
    },
    filters: {
      widthTransformation(status) {
        const statusMap = {
          'archiveNo': "250",
          'fileTitle': "250",
          'director': "150",
        };
        return statusMap[status];
      },
    },
    data() {
      return {
        btnLoading: false,
        superviseList: [],
        size: 'medium',
        // arrList: ["档号", "题名", "指导人", "指导内容"],
        arrList: [{
            name: "档号",
            value: "archiveNo"
          },
          {
            name: "题名",
            value: "fileTitle"
          },
          {
            name: "指导人",
            value: "director"
          },
          {
            name: "指导内容",
            value: "dirContent"
          },
        ]
      }
    },
    methods: {
      cancel() {
        this.$emit("cancel")
      },
      submit() {
        if (this.superviseList.filter(ele => !ele.director).length) {
          message("warning", "请填全指导人", 3000)
          return
        }
        // if (this.superviseList.filter(ele => !ele.dirContent).length) {
        //   message("warning", "请填全指导内容", 3000)
        //   return
        // }
        this.btnLoading = true
        let data = {
          superviseGuides: this.superviseList
        }
        addSuperviseGuide(data).then(res => {
          message("success", "操作成功", 3000)
          this.cancel()
        }).finally(res => {
          this.btnLoading = false
        })
      }
    }
  }

</script>
<style lang="scss" scoped>
  ::v-deep {
    .my-label {
      font-size: 15px;
      letter-spacing: 2px;
      color: rgb(0, 0, 0);
    }

    .my-content {
      // background: #f8f8f8;
      font-weight: 600;
      color: rgb(0, 0, 0);
      text-align: center;
    }

    .contentSpan {
      letter-spacing: 1px;
      background: #dde2ff;
      padding: 7px 17px;
      border-radius: 10px;
      cursor: pointer;
      font-weight: 600;
    }

    .contentSpan:hover {
      color: rgb(0, 13, 255);
    }
  }

  .formZD {
    display: flex;
    justify-content: space-around;
    padding-bottom: 6px;

    ::v-deep {
      .el-input__inner {
        // width: 230px
        padding: 5px;
      }
    }

    .formOne {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 20%;


    }

    .formTwo {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 29%;
    }

    .formThree {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 150px;
    }

    .formFour {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 35%;

    }

    .labelDh {
      width: 70px;
      // padding: 0 5px;
      text-align: right;
    }

    .labelTitle {
      width: 70px;
      // padding: 0 5px;
      text-align: right;
    }

    .labelMen {
      width: 90px;
      // padding: 0 5px;
      text-align: right;
    }

    .labelContent {
      width: 100px;
      // padding: 0 5px;
      text-align: right;
    }


  }

  .labelD {

    width: 100px;
  }

</style>
