<template>
  <div :class="$style.wrapHeight">
    <div :class="$style.rowHeight">
      <audit-advanced-query
        :expand="expand"
        :search-data="searchData"
        :ref-name="searchform"
        :search-style="{ height: '150px', left: '20px', top: '57px' }"
        :search-fun="handleSearch"
        @searchedClick="searchedClick"
      >
        <!-- 插槽放置搜索内容 -->
        <template>
          <!-- <a-col :span="12">
            <a-form-model-item :label="'阶段编号'" prop="code">
              <a-input v-model="searchData.code" allow-clear />
            </a-form-model-item>
          </a-col> -->
          <a-col :span="12">
            <a-form-model-item :label="'阶段名称'" prop="name">
              <a-input v-model="searchData.name" allow-clear />
            </a-form-model-item>
          </a-col>
        </template>
      </audit-advanced-query>
      <!-- 列表 -->
      <!-- sddataTable sdDatatableEx  sddata-->
      <!-- :filter-expressions="expressions" 筛选项
            :columns="columns" 表头
            :actions="actions" 按钮
            :search-fields="[]" 默认搜索项
            高级搜索组件配套使用
            :show-advance-query="true"
            @searchbtnClick="searchbtnClick"
            选中
            show-selection
          -->
      <a-card>
        <SdDataTableEx
          ref="sddataTable"
          :form-id="formId"
          :page-id="pageId"
          :data-url="dataUrl"
          :columns="columns"
          :actions="actions"
          :filter-expressions="expressions"
          show-selection
          :search-fields="['code']"
          :show-advance-query="true"
          @searchbtnClick="searchbtnClick"
        >
          <!-- 表格列 -->
          <template slot="link" slot-scope="text, record">
            <a @click="showFormModal(record.id)">{{ text }}</a>
          </template>
          <!-- 插槽放置表格内容 -->
          <template v-slot:form="{ model }" v-sd-watermark="waterMark" @saved="onSaved">
            <!-- <sdFormItem name="" /> -->
            <!-- code name description -->
            <!-- <SdFormItem name="code" /> -->
            <SdFormItem name="name" />
            <!-- 模型领域名称 下拉选项 -->
            <SdFormItem name="domainId" label="模型领域">
              <a-select
                v-model="model.domainId"
                show-search
                :filter-option="filterOption"
                @change="areahandle"
              >
                <!-- val=name  -->
                <a-select-option v-for="item in areaOption" :key="item.id" :value="item.id">{{
                  item.name
                }}</a-select-option>
              </a-select>
            </SdFormItem>
            <!-- domainName -->
            <SdFormItem ref="domainName" name="domainName" :hidden="true" />
            <SdFormItem name="description">
              <a-textarea v-model="model.description" />
            </SdFormItem>
          </template>
        </SdDataTableEx>
      </a-card>
    </div>
  </div>
</template>

<script>
// 筛选组件
import auditAdvancedQuery from '../../components/audit-advanced-query.vue'
import auditAdvancedQueryMixins from '../../components/audit-advanced-query-mixins'
// 表格组件 + 表格扩展组件
import SdDataTableEx from '@/common/components/sd-data-table-ex.vue'
// 表格按钮类型
import TableActionTypes from '@/common/services/table-action-types'
import TableColumnTypes from '@/common/services/table-column-types'
// 请求
import auditMaintainService from './audit-maintain-service'
import SdFormItem from '@/common/components/sd-form-item.vue'
export default {
  // 大驼峰文件名
  name: 'AuditStageList',
  metaInfo: {
    // 页面标题
    title: '模型阶段',
  },
  components: {
    // 引入组件
    SdFormItem,
    SdDataTableEx,
    auditAdvancedQuery,
  },
  mixins: [auditAdvancedQueryMixins],
  data() {
    return {
      // 搜索条件
      searchData: {},
      // 搜索接口传参
      expressions: [],
      // 搜索组件ref
      searchform: 'searchform',
      // 搜索条件展开
      expand: false,
      // 列表请求地址
      dataUrl: 'api/xcoa-mobile/v1/iam-page/businessList',
      // pageId
      pageId: 'audit/maintain/iamModelPhase',
      // formId
      formId: 'iamModelPhase',
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: 'sortNumber',
          width: '80px',
          customRender: (text, record, index) => `${index + 1}`,
        },
        // code name description
        {
          title: '阶段编码',
          dataIndex: 'id',
        },
        {
          title: '阶段名称',
          dataIndex: 'name',
          scopedSlots: { customRender: 'link' },
        },
        {
          title: '创建时间',
          dataIndex: 'creationTime',
          sdRender: TableColumnTypes.date,
        },
        {
          title: '阶段描述',
          dataIndex: 'description',
        },
      ],
      // 按钮
      actions: [
        {
          label: '新增',
          id: 'create',
          permission: 'create',
          type: TableActionTypes.primary,
          callback: this.showFormModal,
        },
        // 删除
        {
          label: '删除',
          id: 'delete',
          type: TableActionTypes.ex.delete, // 删除按钮，不需要回调，会自动处理（对sd-data-table无效）
        },
      ],
      // 表单提交地址
      pagePath: 'audit/maintain/iamModelPhase',
      // 领域数据
      areaOption: [],
    }
  },
  methods: {
    // 搜索方法
    handleSearch() {
      // 搜索条件

      const searchDataKeys = Object.keys(this.searchData)
      // 删除指定字段
      this.expressions = searchDataKeys.map((item) => {
        return {
          dataType: 'str',
          name: item,
          op: 'like',
          stringValue: `%${this.searchData[item]}%`,
        }
      })
    },
    // 显示表单
    showFormModal(id = null) {
      this.$refs.sddataTable.showDetailModal(id, this.pagePath)
      this.getAllAreaOption()
    },
    // 获取领域信息
    getAllAreaOption() {
      auditMaintainService.getAreaListAll().then((res) => {
        this.areaOption = res.data
      })
    },
    // option过滤
    filterOption(input, option) {
      return option.componentOptions.children[0].text.indexOf(input) >= 0
    },
    // option值变化
    areahandle(value) {
      const name = this.areaOption.find((item) => item.id === value).name
      this.$refs.sddataTable.$refs.detail.$refs.form.setFieldValue('domainName', name)
    },
  },
}
</script>

<style lang="scss" module>
@use '@/common/design' as *;
.wrap-height {
  height: 100%;
  .row-height {
    position: relative;
    display: flex;
    flex: auto;
    height: 100%;
  }
}
</style>
