<!--组织详情-->
<template>
  <div class="index-home">
    <div v-loading.fullscreen.lock="loadingFull" />
    <div class="first">
      <div class="name">{{ organDetail.name }}</div>
      <div class="left">
        <div class="title">
          <div>支部书记：</div>
          <div>支部宣传委员：</div>
          <div>支部组织委员：</div>
          <div>换届时间（创建时间）：</div>
          <div>届数：</div>
          <div>状态：</div>
        </div>
        <div class="text">
          <div>{{ organDetail.zb_sj }}</div>
          <div>{{ organDetail.zb_xcwy }}</div>
          <div>{{ organDetail.zb_wy }}</div>
          <div>{{ organDetail.zb_hj_date }}</div>
          <div>第{{ organDetail.zb_rq }}届</div>
          <div>
            <el-tag v-if="organDetail.status == 1" size="mini">正常</el-tag>
            <el-tag v-else type="danger" size="mini">暂停</el-tag>
          </div>
        </div>
      </div>
      <div class="left">
        <div class="title">
          <div>正式党员数：</div>
          <div>预备党员书：</div>
          <div>发展对象数：</div>
          <div>积极分子数：</div>
          <div>申请人数：</div>
        </div>
        <div class="text">
          <div>{{ organDetail.party_member_num }}</div>
          <div>{{ organDetail.prepare_party_member_num }}</div>
          <div>{{ organDetail.development_member_num }}</div>
          <div>{{ organDetail.activists_member_num }}</div>
          <div>{{ organDetail.apply_member_num }}</div>
        </div>
      </div>
    </div>
    <div class="second">
      <div class="left">
        <div class="title" style="text-algin:left">换届记录</div>
        <div class="search">
          <el-form ref="searchParams" :model="searchParams" label-width="80px">
            <el-input
              v-model="searchParams.zb_sj"
              placeholder="支部书记"
              clearable
            ></el-input>
            <el-button type="primary" @click="searchRecord" icon="el-icon-search">搜索</el-button>
            <el-button
              type="success"  icon="el-icon-edit"
              @click="(recordVisible = true), (type = 1)"
              >添加记录</el-button
            >
          </el-form>
        </div>
        <el-table
          :data="changeRecord"
          border
          style="width: 100%"
          @row-click="tableList"
          max-height="450"
          :row-class-name="tableRowClassName"
        >
          <el-table-column prop="zb_rq" label="届数" width="60">
          </el-table-column>
          <el-table-column prop="zb_hj_date" label="换届时间" width="100">
          </el-table-column>
          <el-table-column prop="zb_sj" label="支部书记" width="100">
          </el-table-column>
          <el-table-column prop="zb_xcwy" label="支部宣传委员" width="120">
          </el-table-column>
          <el-table-column prop="zb_wy" label="支部组织委员" width="120">
          </el-table-column>
          <el-table-column prop="created_at" label="创建时间" width="155">
          </el-table-column>
          <el-table-column prop="updated_at" label="修改时间" width="155">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="210"
          >
            <template slot-scope="{ row }">
              <el-button
                @click="recordDetail(row.id)"
                type="primary"
                plain
                size="mini"
                >详情</el-button
              >
              <el-button
                type="success"
                plain
                size="mini"
                @click="editDetail(row)"
                >编辑</el-button
              >
              <el-button
                type="warning"
                plain
                size="mini"
                @click="deleteRecord(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--查看详情-->
      <el-dialog
        title="查看详情"
        :visible.sync="dialogVisible"
        width="30%"
        center
      >
        <div class="details">
          <div class="det">
            <div class="left_1">支部名称：{{ organDetail.name }}</div>
            <div class="right_1">支部书记：{{ recDetails.zb_sj }}</div>
          </div>
          <div class="det">
            <div class="left_1">换届日期：{{ recDetails.zb_hj_date }}</div>
            <div class="right_1">届数:{{ recDetails.zb_rq }}</div>
          </div>
          <div class="det">
            <div class="left_1">支部组织委员：{{ recDetails.zb_wy }}</div>
            <div class="right_1">支部宣传委员：{{ recDetails.zb_xcwy }}</div>
          </div>
          <div class="det">
            <div class="left_1" style="flex:0 0 20%">其他任职人员:</div>
            <div class="right_1">
              <div
                v-for="(item, index1) in recDetails.zb_qtry"
                :key="index1"
                style="height:40px;
                line-height:50px;"
              >
                <span>{{ item.name }}</span> <span>({{ item.job }})</span>
              </div>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false"
            >关闭</el-button
          >
        </span>
      </el-dialog>
      <!--新增换届记录-->
      <el-dialog
        title="新增换届记录 "
        :visible.sync="recordVisible"
        width="40%"
        center
      >
        <el-form
          :model="setupForm"
          ref="setupForm"
          label-width="100px"
          :rules="rules"
          class="demo-ruleForm"
        >
          <!--
          <el-form-item
            label="组织id"
            prop="organization_id"
          >
            <el-input v-model="setupForm.organization_id"></el-input>
          </el-form-item>-->
          <el-form-item label="任届" prop="zb_rq">
            <el-input
              type="number"
              onkeyup="value=value.replace(/[^\d]/g,'')"
              v-model="setupForm.zb_rq"
              placeholder="请输入数字"
            ></el-input>
          </el-form-item>
          <el-form-item label="换届时间" prop="zb_hj_date">
            <el-date-picker
              v-model="setupForm.zb_hj_date"
              type="date"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="支部书记" prop="zb_sj">
            <el-input v-model="setupForm.zb_sj"></el-input>
          </el-form-item>
          <el-form-item label="支部宣传委员" prop="zb_xcwy">
            <el-input v-model="setupForm.zb_xcwy"></el-input>
          </el-form-item>
          <el-form-item label="支部组织委员" prop="zb_wy">
            <el-input v-model="setupForm.zb_wy"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select
              v-model="setupForm.status"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in status"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="其他人职务" prop="zb_qtry">
            <div
              class="other_personnel"
              v-for="(item, index) in setupForm.zb_qtry"
              :key="index"
            >
              <el-input v-model="item.name" placeholder="请输入姓名"></el-input>
              <el-input v-model="item.job" placeholder="请输入职位"></el-input>
            </div>
            <svg-icon
              icon-class="add"
              style="color:#409EFF;font-size:24px;"
              @click="addOtherPerson(1)"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >立即创建</el-button
            >

            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog
        title="编辑换届记录"
        :visible.sync="recordVisible1"
        width="40%"
        center
      >
        <el-form
          :model="editForm"
          ref="editForm"
          label-width="100px"
          class="demo-ruleForm"
          :rules="rules"
        >
          <!--
          <el-form-item
            label="组织id"
            prop="organization_id"
          >
            <el-input v-model="setupForm.organization_id"></el-input>
          </el-form-item>-->
          <!--<el-form-item
            label="任届"
            prop="zb_rq"
          >
            <el-input
              type="text"
              onkeyup="value=value.replace(/[^\d]/g,'')"
              v-model="editForm.zb_rq"
            ></el-input>
          </el-form-item>-->
          <el-form-item label="换届时间" prop="zb_hj_date">
            <el-date-picker
              v-model="editForm.zb_hj_date"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="支部书记" prop="zb_sj">
            <el-input v-model="editForm.zb_sj"></el-input>
          </el-form-item>
          <el-form-item label="支部宣传委员" prop="zb_xcwy">
            <el-input v-model="editForm.zb_xcwy"></el-input>
          </el-form-item>
          <el-form-item label="支部组织委员" prop="zb_wy">
            <el-input v-model="editForm.zb_wy"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select
              v-model="editForm.status"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in status"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="其他人职务" prop="zb_qtry">
            <div
              class="other_personnel"
              v-for="(item, index) in editForm.zb_qtry"
              :key="index"
            >
              <el-input v-model="item.name" placeholder="请输入姓名"></el-input>
              <el-input v-model="item.job" placeholder="请输入职位"></el-input>
            </div>
            <svg-icon
              icon-class="add"
              style="color:#409EFF;font-size:24px;"
              @click="addOtherPerson(2)"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveEdit('ruleForm')"
              >保存编辑</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!--流程文档-->
      <div class="right">
        <div class="title" style="text-algin:left">流程挡案</div>
        <div class="search">
          <el-form ref="searchParams" :model="searchParams" label-width="80px">
            <el-input
              v-model="searchParams.name"
              placeholder="文件名称"
              style="width:150px;"
              clearable
            ></el-input>
            <el-select
              v-model="searchParams.type"
              placeholder="文件类型"
              clearable
            >
              <el-option
                v-for="item in fileType"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <el-button type="primary" @click="searchDangan" icon="el-icon-search">搜索</el-button>
            <el-button type="success" @click="fileDialogVisible = true"  icon="el-icon-edit"
              >添加挡案</el-button
            >
          </el-form>
        </div>
        <el-table
          border
          :data="danganList"
          max-height="450"
          style="width: 100%"
        >
          <el-table-column prop="name" label="文件名称"> </el-table-column>
          <el-table-column
            prop="type"
            label="文件类型"
            width="80"
            align="center"
          >
            <template slot-scope="{ row }">
              <el-tag type="success" v-if="row.type == 0" size="mini"
                >富文本</el-tag
              >
              <el-tag type="warning" size="mini" v-else-if="row.type == 1"
                >图片</el-tag
              >
              <el-tag size="mini" v-else>文件</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" label="创建时间" width="160">
          </el-table-column>
          <el-table-column label="操作" width="120" fixed="right">
            <template slot-scope="{ row }">
              <el-button
                v-if="row.type == 1 || row.type == 0"
                @click="lookUp(row.id)"
                type="text"
                size="mini"
                >查看</el-button
              >
              <el-button
                type="text"
                size="mini"
                v-if="row.type == 2"
                @click="downloadFile(row)"
              >
                下载
              </el-button>
              <el-button type="text" size="mini" @click="deleteFile(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!--创建文件-->
        <el-dialog
          title="新增文件"
          :visible.sync="fileDialogVisible"
          width="50%"
          center
        >
          <el-form
            :model="creatFile"
            :rules="rules"
            ref="creatFile"
            label-width="100px"
            class="demo-ruleForm"
          >
            <!--
            <el-form-item
              label="组织id"
              prop="organization_id"
            >
              <el-input v-model="creatFile.organization_id"></el-input>
            </el-form-item>
            <el-form-item
              label="换届记录id"
              prop="organization_record_id"
            >
              <el-input v-model="creatFile.organization_record_id"></el-input>
            </el-form-item>-->
            <el-form-item label="挡案名称" prop="name">
              <el-input v-model="creatFile.name"></el-input>
            </el-form-item>

            <el-form-item label="状态" prop="status">
              <el-select
                v-model="creatFile.status"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="内容" prop="body">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="图片" name="image">
                  <el-upload
                    class="upload-demo"
                    ref="upload"
                   :action="base_url+'/upload'"
                    :file-list="fileList"
                    :auto-upload="true"
                    :on-success="uploadSuccess"
                    :multiple="true"
                    :data="fileData"
                    accept=".jpg,.jpeg,.png"
                    :on-remove="handleRemove"
                    list-type="picture"
                  >
                    <el-button slot="trigger" size="mini" type="primary"
                      >选择图片</el-button
                    >
                    <div slot="tip" class="el-upload__tip">
                      只能上传jpg/png文件，且不超过500kb
                    </div>
                  </el-upload>
                </el-tab-pane>
                <el-tab-pane label="文件" name="file">
                  <el-upload
                    class="upload-demo"
                    ref="uploadFile"
                    :action="base_url+'/upload'"
                    :file-list="fileList"
                    :auto-upload="true"
                  :multiple="true"
                    :on-success="uploadFileSuccess"
                    :data="fileData"
                    accept=".doc,.docx"
                    list-type="picture"
                  >
                    <el-button slot="trigger" size="mini" type="primary"
                      >选择文件</el-button
                    >
                    <div slot="tip" class="el-upload__tip">
                      上传word,pdf文件，且不超过500kb
                    </div>
                  </el-upload>
                </el-tab-pane>
                <el-tab-pane label="富文本" name="text">
                  <tinymce
                    v-model="creatFile.body"
                    :height="300"
                    style="width:95%;!important"
                  />
                </el-tab-pane>
              </el-tabs>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitUploadfile('ruleForm')"
                >立即创建</el-button
              >
              <el-button @click="resetForm('creatFile')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <!--查看换届挡案详情-->
        <el-dialog
          title="文件详情"
          :visible.sync="detailVisible"
          width="50%"
          center
        >
          <div class="title" style="text-align: center;">
            {{ fileDetail.name }}
          </div>
          <div class="title-time">更新时间： {{ fileDetail.updated_at }}</div>
          <!--富文本-->
          <div class="content" v-if="fileDetail.type == 0">
            <p v-html="fileDetail.body"></p>
          </div>
          <!--图片-->

          <div v-if="fileDetail.type == 1" class="edit-image">
            <div
              class="img-list"
              @click="imageDetail(item)"
              v-for="(item, index) in fileDetail.resource"
            >
              <img :src="item" alt="" />
            </div>

            <div
              class="big-img"
              v-show="imgDetaildialogVisible"
              @click="closeBigImg"
            >
              <img :src="bigImage" alt="" />
            </div>
          </div>
          <!--word链接-->
          <div v-if="fileDetail.type == 2" class="text">
            <a :href="fileDetail.body" download="文件"
              >点击下载模板：{{ fileDetail.name }}</a
            >
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button  type="primary" @click="detailVisible = false">关 闭</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import {
  organizaDetail,
  changeRecords,
  recordDetails,
  setupRecord,
  updateRecord,
  deleteRecord,
  danganList,
  creatDocument,
  lookUpDetail,
  deleteFile,
  searchDangan,
  searchRecords
} from "@/api/organizationDetail/index";
import { async } from "q";
import Tinymce from "@/components/Tinymce";
import { types } from "util";
import { templates } from "@/api/TemplateSet";
import { setTimeout } from "timers";
export default {
  data() {
    return {
      organDetail: "",
      loadingFull: false,
      imgDetaildialogVisible: false,
      changeRecord: "", //换届记录
      dialogVisible: false,
      recDetails: {}, //记录详情,
      recordVisible: false, //新增换届记录
      recordVisible1: false, //编辑换届记录
      fileDialogVisible: false, //新建文件列表
      detailVisible: false, //文件详情
      searchParams: {
        name: "", //支部名称
        type: "",
        zb_sj: "",
        limit: 15, //每页显示条数
        page: 1 //当前页码
      }, //搜索框数据
      setupForm: {
        zb_sj: "",
        zb_wy: "",
        zb_xcwy: "",
        zb_qtry: [
          {
            name: "",
            job: ""
          }
        ],
        zb_rq: "",
        zb_hj_date: "",
        organization_id: "", //当前支部id
        status: 1
      },
      editForm: {
        zb_sj: "",
        zb_wy: "",
        zb_xcwy: "",
        zb_qtry: [
          {
            name: "",
            job: ""
          }
        ],
        zb_rq: "",
        zb_hj_date: "",
        status: ""
      }, //新增编辑数据列表
      status: [
        {
          value: 0,
          name: "暂停"
        },
        {
          value: 1,
          name: "正常"
        }
      ],
      fileType: [
        {
          value: 0,
          name: "富文本"
        },
        {
          value: 1,
          name: "图片"
        },
        {
          value: 2,
          name: "文件"
        }
      ], //文件类型选择列表
      fileDetail: "",
      type: "", //类型1为新增 2为编辑
      id: "",
      danganList: "", //换届文档列表
      creatFile: {
        type: "",
        organization_id: "",
        organization_record_id: "",
        name: "",
        status: 1,
        body: ""
      }, //
      rules: {
        zb_rq: [
          {
            required: true,
            message: "请输入任期",
            trigger: "blur"
          }
        ],
        zb_hj_date: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        zb_sj: [
          {
            required: true,
            message: "请输入任期",
            trigger: "填写支部书记"
          }
        ],
        name: [
          {
            required: true,
            message: "文件名称不能为空",
            trigger: "blur"
          }
        ]
      }, //表格验证规则
      activeName: "image",
      fileData: {
        file_type: "img"
      },
      fileList: [], //上传挡案文件列表
      resourceIds: [], //文件id
      file: "",
      rowId: "",
      otherPerson: [
        {
          index: "",
          name: "",
          job: ""
        }
      ],
      bigImage: ""
    };
  },
  components: { Tinymce },
  created() {
    const id = this.$route.query.id;
    this.id = id;
    this.setupForm.organization_id = id;
    this.creatFile.organization_id = id;
    this.detail(id);
    this.record(id);
    this.creatFile.type = 1;
    this.fileData.file_type = "img";
  },
  methods: {
    //关闭大图
    closeBigImg() {
      this.imgDetaildialogVisible = false;
    },
    //查看大图
    imageDetail(item) {
      this.imgDetaildialogVisible = true;
      this.bigImage = item;
    },
    //组织信息
    async detail(id) {
      this.loadingFull = true;
      await organizaDetail(id).then(res => {
        console.log(res, "pppopo");
        this.organDetail = res.data;
        this.loadingFull = false;
      });
    },
    //搜索换届记录
    async searchRecord() {
      this.loadingFull = true;
      const params = {
        id: this.id,
        zb_sj: this.searchParams.zb_sj
      };
      await searchRecords(params).then(res => {
        if (res.code === 200) {
          this.changeRecord = res.data.data;
          if (res.data.data.length > 0) {
            const id = res.data.data[0].id;
            danganList(id).then(res => {
              console.log(res, "档案列表");
              this.danganList = res.data.data;
              this.loadingFull = false;
            });
          } else {
            this.loadingFull = false;
          }
        } else {
          this.$message({
            type: "error",
            message: "查询失败"
          });
        }
      });
    },
    //组织换届记录列表
    async record(id) {
      this.loadingFull = true;
      await changeRecords(id).then(res => {
        this.loadingFull = false;
        console.log(res, "res");
        this.changeRecord = res.data.data;
        const id = res.data.data[0].id;
        //换届文档列表默认显示第一条
        this.creatFile.organization_record_id = id;
        this.rowId = id;
        danganList(id).then(res => {
          console.log(res, "档案列表");
          this.danganList = res.data.data;
          this.loadingFull = false;
        });
      });
    },
    //换届档案列表
    async danganListMethon() {
      this.loadingFull = true;
      await danganList(this.rowId).then(res => {
        console.log(res, "档案列表");
        this.danganList = res.data.data;
        this.loadingFull = false;
      });
    },
    //换届记录详情
    async recordDetail(id) {
      this.loadingFull = true;
      console.log(id, "jiluid");
      await recordDetails(id).then(res => {
        console.log(res, "xiangqing");
        this.recDetails = res.data;
        this.dialogVisible = true;
        this.loadingFull = false;
      });
    },
    //编辑换届记录
    editDetail: function(row) {
      this.recordVisible1 = true;
      console.log(row);
      this.editForm = row;
    },
    //saveEdit保存编辑
    async saveEdit() {
      this.loadingFull = true;
      await updateRecord(this.editForm)
        .then(res => {
          console.log(res, "gengxin");
          this.loadingFull = false;
          if (res.code === 200) {
            this.$message({
              message: "编辑成功",
              type: "success"
            });
            this.recordVisible1 = false;
            this.loadingFull = false;
            this.editForm = [];
          } else {
            this.$message({
              message: "编辑失败",
              type: res.message
            });
          }
        })
        .catch(err => {
          console.log(err, "");
          this.loadingFull = false;
        });
    },
    //删除换届记录
    deleteRecord(id) {
      this.$confirm("此操作将删除此换届记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.sureDeleteRecord(id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    async sureDeleteRecord(id) {
      await deleteRecord(id).then(res => {
        console.log(res, "shanchu");
        if (!res.code) {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.record(this.id);
        } else {
          this.$message({
            message: "删除失败",
            type: "error"
          });
        }
      });
    },
    //创建换届记录
    submitForm(formName) {
      console.log(this.type);
      console.log(this.editForm);
      this.loadingFull = true;
      this.setup();
      this.loadingFull = false;
    },
    async setup() {
      // this.setupForm.zb_qtry=this.setupForm.zb_qtry.toString()
      await setupRecord(this.setupForm).then(res => {
        this.loadingFull = false;
        this.recordVisible = false;
        this.setupForm = [];
        this.record(this.id);
        console.log(res, "ceshi");
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //选中换届记录列表
    async tableList(row, rowIndex) {
      this.rowId = row.id;
      this.creatFile.organization_record_id = row.id;
      await danganList(row.id).then(res => {
        console.log(res, "档案列表");
        this.danganList = res.data.data;
      });
      this.rowId = row.id;
    },
    //切换上传内容图片、文件、富文本
    handleClick(tab) {
      console.log(tab.name, "5656566");
      if (tab.name == "image") {
        this.creatFile.type = 1;
        this.fileData.file_type = "img";
      } else if (tab.name == "file") {
        this.creatFile.type = 2;
        this.fileData.file_type = "file";
      } else {
        this.creatFile.type = 0;
      }
    },
    //移除已上传的文件
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },

    uploadSuccess(response, file, fileList) {
      if (response.code == 200) {
        this.file = response.data.url;
        this.resourceIds.push(response.data.id);
        console.log(response.data, "上传");
      }
    },
    //上传档案
    submitUploadfile() {
      console.log;
      let that = this;

      that.createdFile();
    },
    uploadFileSuccess(response, file, fileList) {
      if (response.code == 200) {
        this.file = response.data.url;
        this.creatFile.body = response.data.url;
        this.resourceIds.push(response.data.id);
        console.log(response);
        this.$message({
          type: "success",
          message: "文件上传成功成功!"
        });
      }
    },
    //创建换届挡案
    async createdFile() {
      if (this.activeName !== "text") {
        this.creatFile.body = this.resourceIds;
      }
      await creatDocument(this.creatFile)
        .then(res => {
          console.log(res, "新建文件");
          if (res.code === 200) {
            this.$message({
              type: "success",
              message: "创建成功!"
            });
            this.fileList.name = "";
            this.fileList = [];
            this.danganListMethon();
          } else {
            this.$message({
              type: "error",
              message: "创建失败!"
            });
          }

          this.fileDialogVisible = false;
        })
        .catch(err => {
          console.log(err, "");
          this.loadingFull = false;
        });
    },
    //搜索换届挡案
    async searchDangan() {
      this.loadingFull = true;
      const params = {
        id: this.rowId,
        name: this.searchParams.name,
        types: this.searchParams.type
      };
      await searchDangan(params).then(res => {
        this.danganList = res.data.data;
        this.loadingFull = false;
        console.log(res, "souzuo");
      });
    },

    //查看挡案详情
    async lookUp(id) {
      this.detailVisible = true;
      this.loadingFull = true;
      await lookUpDetail(id).then(res => {
        console.log(res, "详情");
        this.fileDetail = res.data;
        this.loadingFull = false;
      });
    },
    //删除换届挡案文件
    deleteFile(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteFile(id).then(res => {
            if (!res.code) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.danganListMethon();
            } else {
              this.$message({
                type: "error",
                message: "删除失败!"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //改变table选中行的颜色
    tableRowClassName(row) {
      console.log(row, "ceshi1");
      if (row.row.id === this.rowId) {
        return "warning-row";
      } else {
        return;
      }
    },
    //下载挡案
    downloadFile(row) {
      if (row.type == 1) {
        let a_link = document.createElement("a");
        a_link.style.display = "none";
        a_link.href =
          row.body + "?response-content-type=application/octet-stream";
        a_link.setAttribute("id", "codeLink");
        a_link.setAttribute("download", "xxx");
        document.body.appendChild(a_link);
        a_link.click();

        let objLink = document.getElementById("codeLink");
        document.body.removeChild(objLink);
        console.log(row, "下载");
      } else if (row.type == 0) {
        alert("富文本不支持下载请点击查看");
      } else {
        var alink = document.createElement("a");
        alink.href = row.body;
        alink.download = row.name; //图片名
        console.log(alink);
        alink.click();
      }
    },
    //添加其他人员及职务
    addOtherPerson(type) {
      console.log(type, "type");
      this.index = this.index++;
      this.otherPerson.push({
        name: "",
        index: this.index,
        job: ""
      });
      this.setupForm.zb_qtry = this.otherPerson;
      console.log(this.otherPerson);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/content.scss";

.el-table .warning-row {
  background: #ecf5ff;
}
.el-dialog__body {
  padding-top: 0 !important;
}
.edit-image {
  text-align: center;
  display: flex;
  flex-flow: row wrap;
}

.img-list {
  flex: 0 0 200px;
  height: 200px;
  width: 200px;
  margin: 20px 5px 5px;
  overflow: hidden;
  img {
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 200px;
    width: 200px;
  } 
}
.big-img {
  position: fixed;
  z-index: 99999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  overflow: hidden;
  img {
    margin-top: 3%;
    width: 33%;
    height: auto;
  }
}
.first {
  margin-top: 10px;
  box-shadow: 5px 5px 7px 7px #f1f0f0;

  padding: 20px;
  border-radius: 10px;
  .name {
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 20px;
  }
  .left {
    display: inline-block;
    vertical-align: middle;
    color: #535353;
    min-width: 30%;
    .title {
      width: 35%;
      display: inline-block;
      /*text-align: right;*/
      div {
        height: 30px;
        line-height: 30px;
        font-size: 14px;
      }
    }
    .text {
      display: inline-block;
      div {
        height: 30px;
        line-height: 30px;
        font-size: 14px;
      }
    }
  }
  .right {
    display: inline-block;
    vertical-align: middle;
    width: 30%;
    margin-left: 20px;
    color: #535353;
    div {
      height: 30px;
      line-height: 30px;
      font-size: 14px;
    }
  }
}
.second {
  margin-top: 30px;
  display: flex;
  .left {
    flex: 1;
    padding: 10px;
    padding-bottom: 30px;
    width: 58%;
    margin-right: 5px;
    background-color: #ffffff;
    box-shadow: 5px 5px 7px 7px #f1f0f0;
  }
  .title {
    font-size: 22px;
    font-weight: 500;
    height: 50px;
    line-height: 50px;
    margin-bottom: 5px;
  }
  .right {
    box-shadow: 5px 5px 7px 7px #f1f0f0;
    flex: 1;
    width: 35%;
    padding: 10px;
    background-color: #ffffff;
    padding-bottom: 30px;
  }
  /*.el-button+.el-button{
      margin: 0px;
      margin-top: 5px
  }*/
  .details {
    .det {
      display: flex;
      .left_1 {
        flex: 1;
        height: 50px;
        line-height: 50px;
        font-size: 14px;
        width: 50%;
      }
      .right_1 {
        flex: 1;
        height: 50px;
        width: 50%;
        line-height: 50px;
        font-size: 14px;
      }
    }
  }
}
/*去掉input加减按钮 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.other_personnel {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 10px;
  width: 90%;
  .svg-icon {
    vertical-align: middle;
  }
  .el-input {
    width: 45% !important;
    display: inline-block;
    vertical-align: middle;
    margin-right: 20px;
  }
}
.demo-ruleForm {
  margin: 30px;
}
.title {
  height: 50px;
  line-height: 50px;
  /* text-align: center; */
  font-size: 30px;
}
.content {
  margin-top: 20px;
  font-size: 16px;
  line-height: 22px;
}
.image {
  margin-top: 30px;

  text-align: center;
}

.text {
  height: 50px;
  font-size: 16px;
  color: #409eff;
  margin-top: 20px;
}
.title-time {
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
  color: rgb(143, 142, 142);
}
.search .el-input {
  width: 200px !important;
}
</style>
