<template>
  <a-card>
    <div :class="$style.expertDatabase">
      <div :class="$style.selectList">
        业务领域：
        <a-select
          :class="$style.select"
          placeholder="请选择业务领域"
          :allow-clear="true"
          @change="handleChange"
        >
          <a-select-option v-for="item in listData" :key="item.id" :value="item.name">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </div>

      <sd-oa-table
        ref="dataTable"
        :class="$style.expert"
        form-id="kmExpertData"
        page-id="expert/kmExpertData/kmExpertData"
        :columns="columns"
        :actions="actions"
        :show-selection="showSelection"
        :show-header="false"
        :filter-expressions="expressions"
        :search-fields="['userAccount']"
      >
        <div slot="fldSubject" slot-scope="record">
          <a-avatar
            v-if="record.exportImg !== null"
            :class="$style.img"
            :size="65"
            :src="
              `api/flow-mobile/v1/task-form-process/download-attachments/${record.exportImg}`
                | sdResource
            "
            alt="avatar"
            @click="detalis(record)"
          />
          <a-avatar
            v-else
            :class="$style.img"
            icon="user"
            :size="65"
            :src="''"
            alt="avatar"
            @click="detalis(record)"
          />
          <div :class="$style.info">
            <p
              ><i :class="$style.ww">姓名</i>：<span :class="$style.color"
                ><a @click="detalis(record)">{{ record.userAccount }}</a></span
              >业务领域：<span>{{ record.businessAreaStr }}</span></p
            >
            <p :class="$style.w2"
              ><i :class="$style.ww">职务</i>：<span>{{ record.station }}</span></p
            >
            <p
              ><i :class="$style.ww">部门</i>：<span>{{ record.departmentName }}</span></p
            >
            <p :class="$style.tips" :title="record.introduction"
              >专家简介：<span>{{ record.introduction }}</span></p
            >
          </div>
          <div :class="$style.edit">
            <span v-if="showEditBtn" @click="rowClickEdit(record)">编辑</span>
            <span @click="rowClick(record)">向他提问</span>
          </div>
        </div>
        <template v-slot:form="{ model, fields }" ref="model">
          <table>
            <colgroup>
              <col :class="$style.label" />
              <col :class="$style.input" />
              <col :class="$style.label" />
              <col :class="$style.input" />
            </colgroup>
            <tr>
              <sd-form-item-td :colspan="2" name="applyPerson">
                <sd-user-picker
                  v-model="model.applyPerson"
                  :single="true"
                  :read-only="false"
                  @change="applyPersonchange"
                />
              </sd-form-item-td>
              <td rowspan="5" :class="$style.picture">
                <sd-attachment
                  :class="$style.box"
                  list-type="picture-card"
                  :max="1"
                  :group-id="JSON.parse(fields.photoAttachment.value).value"
                  :read-only="fields.photoAttachment.readonly"
                  @change="change"
                >
                  <a-icon type="plus" />
                  <div class="ant-upload-text">上传头像</div>
                </sd-attachment>
                <sd-form-item-td
                  name="exportImg"
                  :hidden="true"
                  :input-props="{
                    defaultValue: exportImg,
                  }"
                />
              </td>
            </tr>
            <tr><sd-form-item-td name="phoneNumber" :colspan="2"/></tr>
            <tr><sd-form-item-td name="departmentName" :colspan="2"/></tr>
            <tr>
              <sd-form-item-td name="gender" :colspan="2" />
            </tr>
            <tr>
              <sd-form-item-td name="email" :colspan="2" />
            </tr>
            <tr><sd-form-item-td name="station"/></tr>
            <tr>
              <sd-form-item-td name="businessArea" :colspan="3">
                <template v-slot:read-and-edit="{ editable }">
                  <km-business-area-picker v-model="model.businessArea" :read-only="!editable" />
                </template>
              </sd-form-item-td>
            </tr>
            <tr>
              <sd-form-item-td name="introduction" :colspan="3">
                <a-textarea
                  v-model="model.introduction"
                  :rows="4"
                  placeholder="请输入专家简介"
                  allow-clear
                />
              </sd-form-item-td>
            </tr>
            <tr><sd-form-item-td name="serialNumber" :colspan="2"/></tr>
            <tr><sd-form-item-td name="creatorName"/> <sd-form-item-td name="createDeptName"/></tr>
          </table>
        </template>
      </sd-oa-table>
    </div>
    <!-- 向他提问弹出框 -->
    <sd-detail-modal
      ref="question"
      page-id="expert/kmExpertQuestion/kmExpertQuestion"
      :modal-props="{ width: 1000 }"
      @saved="fwSaved"
    >
      <template v-slot="{ model }">
        <sd-form-item name="description" />
        <sd-form-item name="supplementaryNotes">
          <a-textarea
            v-model="model.supplementaryNotes"
            :rows="4"
            placeholder="请输入说明"
            allow-clear
          />
        </sd-form-item>
        <sd-form-item name="label" :colspan="3">
          <template v-slot:read-and-edit="{ editable }">
            <km-tag-picker v-model="model.label" :editable="editable" />
          </template>
        </sd-form-item>
        <sd-form-item
          name="expertDataId"
          :hidden="true"
          :input-props="{ defaultValue: expertDataId }"
        ></sd-form-item>
      </template>
    </sd-detail-modal>
    <a-modal
      v-model="visible"
      :width="1200"
      title="专家库详情"
      :footer="null"
      :destroy-on-close="true"
    >
      <km-expert-details
        :expert-id="expertId"
        :expert-useraccount="expertUserAccount"
      ></km-expert-details>
    </a-modal>
  </a-card>
</template>

<script>
import { Modal } from 'ant-design-vue'
import TableActionTypes from '@/common/services/table-action-types'
import { getUserPerms } from '@/common/store-mixin'
import axios from '@/common/services/axios-instance'
import KmKnowledageService from '../km-knowledage-service'
import KmExpertDetalis from './km-expert-details'
import components from './_import-components/km-expert-list-import'

export default {
  name: 'KmExpertList',
  metaInfo: {
    title: '专家库查看',
  },
  components: {
    ...components,
    'km-expert-details': KmExpertDetalis,
  },
  data() {
    return {
      columns: [
        {
          scopedSlots: { customRender: 'fldSubject' },
        },
        {
          title: '姓名',
          dataIndex: 'userAccount',
          sdHidden: true,
        },
        {
          title: '业务领域',
          dataIndex: 'businessAreaStr',
          sdHidden: true,
        },
        {
          title: '职务',
          dataIndex: 'station',
          sdHidden: true,
        },
        {
          title: '部门',
          dataIndex: 'departmentName',
          sdHidden: true,
        },
        {
          title: '专家简介',
          dataIndex: 'introduction',
          sdHidden: true,
        },
        {
          title: '专家头像',
          dataIndex: 'exportImg',
          sdHidden: true,
        },
      ],
      actions: [
        {
          label: '新建',
          id: 'new',
          type: TableActionTypes.oa.create, // 新建按钮，不需要回调，自动处理
        },
        {
          label: '删除',
          id: 'delete',
          type: TableActionTypes.oa.delete, // 删除按钮，不需要回调，会自动处理
        },
      ],
      listData: [],
      expressions: [],
      expertDataId: null, // 专家id
      exportImg: '',
      showSelection: false,
      visible: false,
      expertUserAccount: '',
      expertId: null,
      val: [],
      showEditBtn: false,
    }
  },
  created() {
    this.getData()
  },
  mounted() {
    // 判断权限  是否显示复选框
    const userPerms = getUserPerms()
    if ('kmExpertData-delete' in userPerms) {
      this.showSelection = true
    }

    if ('kmExpertData-update' in userPerms) {
      this.showEditBtn = true
    }
  },
  methods: {
    applyPersonchange(values) {
      const _this = this
      axios.get(`api/flow-mobile/v1/user-manager/users/${values[0].code}`).then(function(res) {
        _this.$refs.dataTable.getDetailModal().setFieldValue('email', res.data.email)
        _this.$refs.dataTable.getDetailModal().setFieldValue('phoneNumber', res.data.mobile)
        _this.$refs.dataTable
          .getDetailModal()
          .setFieldValue('departmentName', res.data.parentPathName)
      })
    },
    // 获取业务领域接口
    getData() {
      const params = {
        columns: 'id,name',
        expressions: [],
        formId: 'kmDomain',
        maxResults: -1,
        startPosition: 0,
      }
      KmKnowledageService.getKnowledgeComment(params).then((res) => {
        if (res.data.data.length > 0) {
          this.listData = res.data.data
        } else {
          this.listData = []
        }
      })
    },
    rowClickEdit(record) {
      this.$refs.dataTable.showDetailModal(record.id)
    },
    // 向他提问
    rowClick(record) {
      this.expertDataId = record.id
      this.$refs.question.show()
    },
    // 下拉选择业务领域
    handleChange(value) {
      this.expressions = []
      if (value === '' || value === undefined) {
        this.expressions = []
      } else {
        const selectValue = {
          dataType: 'str',
          name: 'businessAreaStr',
          op: 'like',
          stringValue: '%' + value + '%',
        }
        this.expressions.push(selectValue)
      }
    },
    fwSaved() {
      Modal.confirm({
        title: '向他提问',
        content: '已提交',
      })
    },
    // 获取附件
    change(attachments) {
      if (attachments.length > 0) {
        this.$refs.dataTable.getDetailModal().setFieldValue('exportImg', attachments[0].code)
      } else {
        this.$refs.dataTable.getDetailModal().setFieldValue('exportImg', '')
      }
    },
    detalis(record) {
      this.expertId = record.id
      this.expertUserAccount = record.userAccount
      this.visible = true
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.expert-database {
  .select-list {
    float: left;
    margin-top: 8px;
    .select {
      z-index: 9;
      width: 200px;
    }
  }
  table {
    border-collapse: collapse;
  }
  .expert {
    tr {
      min-height: 170px;
      margin-bottom: 10px;
      background: $white;
      border-top: 1px solid #e8e8e8;
      border-bottom: 1px solid #e8e8e8;
      td.ant-table-selection-column:nth-child(1) {
        position: relative;
        padding: 0;
        border: 0;
        span {
          position: absolute;
          top: 10px;
          left: 10px;
        }
      }
      td:nth-child(2) {
        padding: 16px 0;
        overflow: hidden;
      }
      td:last-child {
        float: left;
        width: 95%;
        border: 0;
      }
    }
  }

  .img {
    float: left;
    width: 74px;
    height: 74px;
    cursor: pointer;
    border-radius: 50%;
  }
  .info {
    float: left;
    width: 600px;
    margin-left: 40px;
    p {
      margin-bottom: 0;
      overflow: hidden;
      line-height: $heading-2-size;
      color: $text-color;
      word-break: normal;
      word-wrap: break-word;
      white-space: normal;
      span {
        &:nth-child(1) {
          margin-right: 60px;
        }
      }
      i {
        width: 4em; /* 这个值是看最长能显示几个文字，如x，则为x em */
        font-style: normal;
        text-align: center;
      }
      .ww {
        margin-right: -2em; /* 同上 */
        letter-spacing: 2em; /* 如果需要y个字两端对齐，则为(x-y)/(y-1),这里是（4-2）/(2-1)=2em */
      }
    }
    .tips {
      width: 130%;
      height: 30px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .color {
      margin-right: 50px;
      color: $processing-color;
    }
  }
  .edit {
    float: right;
    padding-right: 20px;
    margin-top: 5%;
    color: $primary-color;
    &:hover {
      cursor: pointer;
    }
    span {
      padding-right: 10px;
    }
  }
  :global(.ant-table-tbody) {
    tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
      background: $white;
    }
  }
  :global
    .ant-table-tbody
    > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
    > td {
    background: $white;
  }
  :global .ant-table-tbody > tr.ant-table-row-selected td {
    background: $white;
  }
  :global(.ant-checkbox-checked::after) {
    border: 0;
  }
}
.picture {
  text-align: center;

  .box {
    :global(.ant-upload-list-item) {
      width: 204px;
      height: 204px;
      margin-right: 0;
    }

    :global(.ant-upload-select-picture-card) {
      width: 204px;
      height: 204px;
    }

    :global(.ant-upload-picture-card-wrapper) {
      margin-right: 0;
    }

    // 下面是图片上传后的样式
    :global(.ant-upload-list-picture-card) {
      display: inline-block;
    }

    :global(.ant-upload-list-picture-card-container) {
      width: 204px;
      height: 204px;
      margin-right: 0;
    }
  }
}
</style>
