// 规定记录审核
<template>
  <div class="center">
    <div class="center_css">
      <div class="top_css">
        <el-row>
          <el-col :span="14">
            <el-button type="primary" :disabled="disabled" @click="AddRecord">新增</el-button>
          </el-col>
          <el-col :span="10">
            <div class="screen">
              <el-input v-model="searchkeyWord" placeholder="可按版本号、编写单位、编撰人员查找" clearable @change="find" />
              <el-button class="search" @click="find"><img
                width="16"
                height="16"
                style="margin-left: -8px"
                src="../../../public/img/sousuo.png"
              ></el-button><span
                class="count_css"
              >共{{ deptBudgetTotal }}条</span>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-table :data="tableData" style="width: 98%; margin: 0 auto; border-radius: 10px" height="55.8vh" border>
        <el-table-column prop="versionNumber" label="版本号" />
        <el-table-column prop="compilationUnit" label="编写单位" />
        <el-table-column prop="editor" label="编撰人员" />
        <el-table-column prop="updateDate" label="更新日期" />
        <el-table-column label="上传" prop="submitter" />
        <el-table-column prop="versionDescription" label="版本说明" />
        <el-table-column prop="status" label="状态" />
        <el-table-column label="操作" min-width="300">
          <template slot-scope="scope">
            <el-link target="_blank" type="primary" :underline="false" @click="look(scope.row)">查看</el-link>
            <el-divider direction="vertical" />
            <el-link target="_blank" type="primary" :underline="false" :disabled="scope.row.status != '待审核'" @click="audit(scope.row)">审核
            </el-link>
            <el-divider direction="vertical" />
            <el-link target="_blank" type="primary" :underline="false" :disabled="scope.row.status != '待审核' && scope.row.status != '已驳回' " @click="del(scope.row)">删除</el-link>
            <el-divider direction="vertical" />
            <el-link target="_blank" type="primary" :underline="false" @click="edit(scope.row)">编辑</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      :current-page="currentPage"
      style="text-align: center; margin-top: 10px"
      :page-size="deptCircularPage.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="deptBudgetTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog :close-on-click-modal='false' title="驳回认证" :visible.sync="rejectInfo" width="400px" :before-close="rejectClose">
      <div>
        <div><span class="sign">*</span>选择驳回原因</div>
        <div class="form_css">
          <el-form ref="form" :model="form" label-width="80px">
            <el-checkbox-group v-model="form.checkList">
              <el-checkbox label="证件照片不清晰" value="1" />
              <el-checkbox label="证件照片上传错误" value="2" />
              <el-checkbox label="身份信息填写错误" value="3" />
              <el-checkbox label="证件信息填写错误" value="4" />
              <el-checkbox label="其他" value="5" />
            </el-checkbox-group>
            <div style="margin: 20px 0;">驳回原因描述（选填）</div>
            <el-input
              v-model="form.rejectReasonDescription"
              type="textarea"
              :rows="3"
              resize="none"
              placeholder="输入驳回原因，1-100个字"
              minlength="100"
            />
            <div class="form_btn">
              <el-button @click="rejectClose">取消</el-button>
              <el-button type="primary" @click="submit">确定</el-button>
            </div>
          </el-form>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getList,
  toExamine,
  postNews,
  delFormData
} from '@/api/platformManagement'
export default {
  data() {
    return {
      tableData: [],
      // 分页
      searchkeyWord: '',
      currentPage: 1,
      pageSize: 10,
      deptBudgetTotal: 0,
      deptCircularPage: {},
      search: '',
      addressUrl: [],
      disabled: false,
      rejectInfo: false,
      form: {
        id: '',
        checkList: [],
        rejectReasonDescription: ''
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    AddRecord() {
      this.$router.push({
        path: 'specifiedRecordsAdd'
      })
    },
    getList() {
      this.loading = true
      const _obj = {}
      _obj.currentPage = this.currentPage
      _obj.pageSize = this.pageSize
      _obj.searchKeyWord = this.searchkeyWord
      _obj.searchType = this.search
      getList(_obj).then(response => {
        this.tableData = response.data.records
        this.deptBudgetTotal = response.data.total
        if (this.tableData[0].status == '待审核' || this.tableData[0].status == '已驳回') {
          // 最上面一条处于待审核和已驳回时新增按钮置灰不可用
          this.disabled = true
        }
        this.listLoading = false
      })
        .catch(() => {
          this.loading = false
        })
    },
    del(row) {
      this.$confirm('确定要删除该记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.listLoading = true
          var _del = {}
          _del.id = row.id
          delFormData(_del).then(response => {
            this.$notify({
              title: '成功',
              message: '删除成功！',
              type: 'success'
            })
            this.getList()
            this.listLoading = false
          })
            .catch(() => {
              this.loading = false
            })
        })
    },
    sendInfoClose() {
      this.Info = {}
      this.sendInfo = false
    },
    submitInfo() {
      this.listLoading = true
      postNews(this.Info).then(response => {
        this.$notify({
          title: '成功',
          message: '发送成功！',
          type: 'success'
        })
        this.sendInfoClose()
        this.listLoading = false
      })
        .catch(() => {
          this.loading = false
        })
    },
    switchChange(row, num) {
      var _examine = {}
      _examine.id = row.id
      let title
      if (num == 1) {
        _examine.flag = 3
        title = '禁用后客户将无法使用所有功能，是否确定禁用？'
      } else if (num == 2) {
        title = '确定重新启用该用户？'
        _examine.flag = 4
      }
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.listLoading = true
          toExamine(_examine).then(response => {
            if (num == 1) {
              this.$notify({
                title: '成功',
                message: '禁用成功！',
                type: 'success'
              })
            } else if (num == 2) {
              this.$notify({
                title: '成功',
                message: '启用成功！',
                type: 'success'
              })
            }
            this.getList()
            this.listLoading = false
          })
            .catch(() => {
              this.loading = false
            })
        })
    },
    find() {
      this.getList()
    },
    look(row) {
      this.$router.push({
        path: 'specifiedRecordsLook',
        query: {
          id: row.id,
          type: '1'
        }
      })
    },
    edit(row) {
      this.$router.push({
        path: 'specifiedRecordsLook',
        query: {
          id: row.id,
          type: '2'
        }
      })
    },
    submit() {
      if (this.form.checkList.length == 0) {
        this.$message.error('请选择驳回原因')
        return
      }
      this.listLoading = true
      this.form.rejectReason = this.form.checkList.toString()
      delete this.form.checkList
      toExamine(this.form).then(response => {
        this.$notify({
          title: '成功',
          message: '驳回成功！',
          type: 'success'
        })
        this.form.checkList = []
        this.form.rejectReasonDescription = ''
        this.rejectInfo = false
        this.getList()
        this.listLoading = false
      })
        .catch(() => {
          this.loading = false
        })
    },
    audit(row) {
      this.$router.push({
        path: 'specifiedRecordsLook',
        query: {
          id: row.id,
          type: '3'
        }
      })
    },
    rejectClose() {
      this.form.checkList = []
      this.form.rejectReasonDescription = ''
      this.rejectInfo = false
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      console.log(`当前页: ${val}`)
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
	.center {
		padding: 10px 20px;
		background: #f5f6f7;
		height: calc(100vh - 5vh);

		.top_css {
			padding: 10px;

			.search_btn {
				display: flex;
				margin-top: 20px;

				.search_item {
					text-align: center;
					font-size: 14px;
					font-weight: 600;
					line-height: 40px;
					width: 112px;
					height: 40px;
					background: #f7f8f9;
					cursor: pointer
				}

				.searchNo {
					color: #323233;
				}

				.search {
					color: #2f53eb;
					background: #ffffff;
				}
			}
		}

		.ask_css {
			position: absolute;
			margin: 3px 0 0 10px;
		}

		.center_css {
			background: #ffffff;
			border-radius: 1px;
			margin-top: 10px;
			padding-bottom: 10px;
		}

		.screen {
			display: flex;

			.search {
				width: 40px;
				height: 40px;
				background: #f7f8fa;
				border-radius: 0px 2px 2px 0px;
				border: 1px solid #f0f1f2;
			}

			.count_css {
				width: 80px;
				text-align: center;
				line-height: 40px;
				color: #666666;
			}
		}

		.el-button {
			padding: 10px 20px !important;
		}

		.center_css {

			::v-deep .el-table th,
			::v-deep .el-table td {
				text-align: center;
			}

			.fujian {
				font-size: 24px;
				color: #409eff;
			}

			.warning {
				font-size: 14px;
				color: #ed1d1d;
			}
		}
	}

	.car_css {
		width: 50%;
		display: inline-block;
		text-align: center;
		margin-top: 30px;
		position: relative;

		.status_css {
			background: #3AC602;
			width: 50px;
			height: 17px;
			position: absolute;
			top: 0px;
			right: 15px;
			border-radius: 3px;
		}

		.carno_css {
			padding: 1px 5px;
			background-color: #F5F6F7;
			color: #666666;
			border-radius: 12px;
			text-align: center;
			width: 100px;
			margin: 10px auto 0;
		}

		.carborder_css {
			border: 1px solid #F0F1F2;
			margin: 15px auto 0;
			width: 90%;
		}
	}

	.tips {
		color: #999999;
		font-size: 14px;
	}

	.car_item {
		width: 200px;
		height: 160px;
		border-radius: 5px;
	}

	.user {
		margin-bottom: 20px;

		.id_css {
			font-size: 14px;
		}

		.id_css,
		.name_css {
			margin: 5px 0;
			color: #0D0D0D;
		}

		.pay_name {
			color: #9D9D9D;
			font-size: 14px;
		}

		.name_css {
			font-size: 16px;
		}

		.user_item {
			margin: 25px 0;
			width: 450px;
			height: 300px;
		}

		.border_css {
			width: 100%;
			border: 1px solid #F0F1F2;
		}
	}

	::v-deep .el-table--border .el-table__header th {
		background: #f7f8f9;
	}

	.btn_css {
		color: #409EFF;
		cursor: pointer
	}

	.btn_css1 {
		margin-left: -20px;
	}

	.sign {
		font-size: 14px;
		color: red;
	}

	.form_css {
		width: 100%;
		margin: 20px auto 20px;

		::v-deep .el-checkbox {
			width: 40%;
			height: 30px;
		}

		// ::v-deep .el-dialog__body{
		// 	padding: 10px 20px;
		// }
		::v-deep .el-dialog__title {
			font-size: 16px;
		}

		::v-deep .el-textarea__inner {
			background: #F0F1F2;
		}

		.form_btn {
			text-align: right;
			margin-top: 10px;
		}
	}

	//发送信息
	.Info_css {
		.Info_title {
			color: #323233;
			font-size: 16px;
		}

		.Info_item {
			margin: 20px 0;
		}

		.Info_btn {
			text-align: right;
			margin-top: 10px;
		}
	}

	//附件
	.file {
		.fujian_css {
			width: 631px;
			display: flex;
			margin: 0 auto;
			text-align: center;
			line-height: 32px;
			border: 1px solid #F0F1F2;
			border-right: 0px;
			border-radius: 2px 0px 0px 2px;

			.fujian_item {
				cursor: pointer;
				width: 90px;
				height: 32px;
				border-right: 1px solid #F0F1F2;
			}

			.file_btn {
				color: #2F53EB;
				background-color: #CFDBFE;
			}
		}

		.file_img {
			width: 525px;
			height: 332px;
			margin: 20px auto;
		}

		.img_css {
			width: 525px;
			height: 332px;
		}

		.btn {
			width: 400px;
			margin: 0 auto;
		}
	}
</style>
