<template>
  <div>
    <a-spin tip="内容套打中..." :spinning="spinning">
      <h4>报告模板：</h4>
      <ul :class="$style.templateUl">
        <li
          v-for="template in templateList"
          :key="template.id"
          :class="{ [$style.checkedLi]: checkedTemp.id === template.id }"
          @click="(e) => setChecked(template)"
        >
          <a-radio :checked="checkedTemp.id === template.id"></a-radio>{{ template.redheadName }}
        </li>
      </ul>
      <h4 :class="$style.findingsTitle">审计发现问题：</h4>
      <audit-advanced-query
        :expand="expand"
        :search-data="formData"
        :ref-name="searchform"
        :search-style="{ height: '170px', left: '0px', top: '155px !important' }"
        :search-fun="handleSearch"
        @searchedClick="searchedClick"
      >
        <template>
          <a-col :span="12">
            <a-form-model-item :label="'审计发现标题'" prop="findTitle">
              <a-input v-model="formData.findTitle" allow-clear />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :label="'审计发现编号'" prop="findCode">
              <a-input v-model="formData.findCode" allow-clear />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :label="'审计发现描述'" prop="findDesc">
              <a-input v-model="formData.findDesc" allow-clear />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :label="'审计建议描述'" prop="suggestion">
              <a-input v-model="formData.suggestion" allow-clear />
            </a-form-model-item>
          </a-col>
        </template>
      </audit-advanced-query>

      <sd-data-table-ex
        ref="sjzlTable"
        :filter-expressions="expressions"
        :columns="columns"
        form-id="iamAuditReportFind"
        page-id="audit/work/reportFind/iamAuditReportFind"
        :search-fields="['findTitle']"
        :show-advance-query="true"
        show-selection
        :modal-props="{ class: 'noBottom' }"
        @searchbtnClick="searchbtnClick"
      >
        <template slot="findType" slot-scope="text">
          {{ JSON.parse(text).text }}
        </template>
      </sd-data-table-ex>
    </a-spin>
  </div>
</template>

<script>
import auditAdvancedQuery from '../../../../components/audit-advanced-query.vue'
import auditAdvancedQueryMixins from '../../../../components/audit-advanced-query-mixins'
import components from './_import-components/iam-audit-report-template-select-import'

export default {
  name: 'IamAuditReportTemplateSelect',
  metaInfo: {
    title: 'IamAuditReportTemplateSelect',
  },
  components: {
    auditAdvancedQuery,
    ...components,
  },
  mixins: [auditAdvancedQueryMixins],
  props: {
    // 项目ID
    projectId: {
      type: String,
      default: '',
    },
    // 模板列表
    templateList: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      searchform: 'searchform',
      expressions: [
        {
          dataType: 'long',
          name: 'projectId',
          op: 'eq',
          longValue: this.projectId,
        },
      ],
      formData: {
        materialTitle: '',
        materialCode: '',
        docStatus: null,
        creationTime: null,
      },
      columns: [
        {
          title: '序号',
          customRender: (text, record, index) => `${index + 1}`,
          width: '80px',
        },
        {
          title: '审计发现标题',
          dataIndex: 'findTitle',
          scopedSlots: { customRender: 'islink' },
          width: '20%',
        },
        {
          title: '审计发现编号',
          dataIndex: 'findCode',
          width: '20%',
          sorter: true,
        },
        {
          title: '审计发现类别',
          dataIndex: 'findType',
          scopedSlots: { customRender: 'findType' },
          width: '15%',
        },
        {
          title: '审计建议类型',
          dataIndex: 'suggestionType',
          width: '15%',
        },
        {
          title: '发送整改状态',
          dataIndex: 'findTitle1',
          scopedSlots: { customRender: 'islink' },
          width: '10%',
          sorter: true,
        },
        {
          title: '编制人员',
          dataIndex: 'creatorName',
          width: '10%',
          sorter: true,
        },
        {
          title: '审计发现描述',
          dataIndex: 'findDesc',
          width: '10%',
          sdHidden: true,
        },
        {
          title: '管理建议',
          dataIndex: 'suggestion',
          width: '10%',
          sdHidden: true,
        },
      ],
      actions: [],
      checkedTemp: { id: null },
      spinning: false,
    }
  },
  methods: {
    // 设置单选选中
    setChecked(template) {
      this.checkedTemp = template
    },
    // 查询
    handleSearch() {
      // 默认查询条件
      this.expressions = [
        {
          dataType: 'long',
          name: 'projectId',
          op: 'eq',
          longValue: this.projectId,
        },
      ]

      // 审计发现标题
      if (this.formData.findTitle) {
        this.expressions.push({
          dataType: 'str',
          name: 'findTitle',
          op: 'like',
          stringValue: `%${this.formData.findTitle}%`,
        })
      }

      // 审计发现编号
      if (this.formData.findCode) {
        this.expressions.push({
          dataType: 'str',
          name: 'findCode',
          op: 'like',
          stringValue: `%${this.formData.findCode}%`,
        })
      }

      // 审计发现描述
      if (this.formData.findDesc) {
        this.expressions.push({
          dataType: 'str',
          name: 'findDesc',
          op: 'like',
          stringValue: `%${this.formData.findDesc}%`,
        })
      }

      // 审计建议描述
      if (this.formData.suggestion) {
        this.expressions.push({
          dataType: 'str',
          name: 'suggestion',
          op: 'like',
          stringValue: `%${this.formData.suggestion}%`,
        })
      }
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.main-div {
  background: #fff;
}
.left-div {
  margin-right: 15px;
  background: #fff;
  border: 1px solid #e8e8e8;
}
.right-div {
  background: #fff;
}
.template-ul {
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: auto;
  list-style: none;
  border: 1px solid #e8e8e8;
  li {
    min-height: 32px;
    padding: 6px 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    border-bottom: 1px solid #e8e8e8;
    transition: all 0.3s;
  }
  .checked-li {
    background-color: #e6f7ff;
  }
  li:hover {
    cursor: pointer;
    background-color: #e6f7ff;
  }
  li:last-child {
    border-bottom: none;
  }
}
.findings-title {
  padding-top: 20px;
}
</style>
