<template>
  <template-page
    v-if="pageShow"
    ref="pageRef"
    :get-list="getList"
    :exportList="exportList"
    :table-attributes="tableAttributes"
    :table-events="tableEvents"
    :options-evens-group="optionsEvensGroup"
    :moreParameters="moreParameters"
    :column-parsing="columnParsing"
    :operation="operation()"
    key="pageType"
  >
    <div class="cartographer_big">
      <el-dialog title="所属科室" width="100%" :modal="false" :visible.sync="formDialog" :before-close="handleClose">
        <zj-page-container>
          <zj-page-fill>
            <div style="box-sizing: border-box; padding: 20px 20px 0 20px">
              <zj-form-container ref="formRef" :form-data="formData" :form-attributes="{ size: 'mini' }">
                <zj-form-module title="设置" label-width="100px" :form-data="formData" :form-items="formItems">
                </zj-form-module>
              </zj-form-container>
            </div>
          </zj-page-fill>
          <div style="text-align: right; box-sizing: border-box; padding: 16px 20px">
            <el-button size="mini" @click="handleClose">取消</el-button>
            <el-button size="mini" type="primary" @click="save">保存</el-button>
          </div>
        </zj-page-container>
      </el-dialog>
    </div>
  </template-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import operation_mixin from '@/components/template/operation_mixin.js'
import {
  letterManagerListUser,
  letterManagerListUserExport,
  letterManagerImport,
  letterManagerAddUser,
  letterManagerUpdateUser,
  letterManagerDetailUser,
  letterManagerDelUser
} from '@/api/department.js'
import { getAccountList } from '@/api/setting'
import { required } from '@/components/template/rules_verify.js'
import { commonTemplateDownload } from '@/api/common.js'
import { getWebsit } from '@/api/customerManagement.js'
import { letterManagerList } from '@/api/departmentSetting.js'
export default {
  components: { TemplatePage },
  mixins: [import_mixin, operation_mixin],
  data() {
    return {
      pageType: 'list',
      pageShow: true,
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: false
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      // 勾选选中行
      recordSelected: [],
      /** 表单变量 */
      formDialog: false,
      formData: {
        websitId: '',
        adminUserId: '',
        dapartmentId: ''
      },
      websitList: [],
      managerList: [],
      accountList: []
    }
  },
  computed: {
    // 事件组合
    optionsEvensGroup() {
      return [
        [
          [
            this.optionsEvensAuth('add', {
              click: this.openForm
            })
          ]
        ],
        [
          [
            this.optionsEvensAuth('import', ({ moduleName }) => {
              return {
                name: moduleName,
                render: () => {
                  return this.importButton(letterManagerImport, moduleName)
                }
              }
            })
          ],
          [
            this.optionsEvensAuth('downloadTemplate', {
              click: () => {
                commonTemplateDownload({ name: '科室人员导入模版.xlsx' }, `科室人员导入模版`)
                  .then(res => {
                    this.$message({
                      message: '下载成功',
                      type: 'success'
                    })
                  })
                  .catch(err => {
                    this.$message.error('下载失败')
                  })
              }
            })
          ]
        ]
      ]
    },
    // 更多参数
    moreParameters() {
      return []
    },
    formItems() {
      return [
        {
          name: 'el-select',
          options: this.websitList.map(item => ({
            data: item,
            label: `(${item.websitId})${item.name}`,
            value: item.websitId
          })),
          md: 8,
          attributes: {
            placeholder: '请选择',
            clearable: true,
            filterable: true
          },
          formItemAttributes: {
            label: '所属网点',
            prop: 'websitId',
            rules: [...required]
          },
          events: {
            change: val => {
              this.formData.adminUserId = ''
              this.formData.userName = ''
              if (val) {
                this.formData.websitName = this.websitList?.find(item => item.websitId === val)?.name
                getAccountList({
                  websitId: val,
                  pageNum: 1,
                  pageSize: -1
                }).then(res => {
                  this.accountList = res.data.records
                })
              } else {
                this.formData.websitName = ''
                this.accountList = []
              }
            }
          }
        },
        {
          name: 'el-select',
          options: this.accountList.map(item => ({
            data: { ...item },
            label: `(${item.userName})${item.nickName}`,
            value: item.adminUserId
          })),
          md: 8,
          attributes: {
            placeholder: '请选择',
            clearable: true,
            filterable: true
          },
          formItemAttributes: {
            label: '选择账号',
            prop: 'adminUserId',
            rules: [...required]
          },
          events: {
            change: val => {
              if (val) {
                this.formData.userName = this.accountList?.find(item => item.adminUserId === val)?.userName
                this.formData.nickName = this.accountList?.find(item => item.adminUserId === val)?.nickName
              } else {
                this.formData.userName = ''
                this.formData.nickName = ''
              }
            }
          }
        },
        {
          name: 'el-select',
          options: this.managerList.map(item => ({
            data: { ...item },
            label: item.dapartment,
            value: item.id
          })),
          md: 8,
          attributes: {
            placeholder: '请选择',
            clearable: true,
            filterable: true
          },
          formItemAttributes: {
            label: '选择科室',
            prop: 'dapartmentId',
            rules: [...required]
          },
          events: {
            change: val => {
              if (val) {
                this.formData.dapartment = this.managerList?.find(item => item.id === val)?.dapartment
              } else {
                this.formData.dapartment = ''
              }
            }
          }
        }
      ]
    }
  },
  methods: {
    // 列表请求函数
    getList: letterManagerListUser,
    // 列表导出函数
    exportList: letterManagerListUserExport,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    // 打开创建弹窗
    openForm() {
      //
      Promise.all([getWebsit({ status: true }), letterManagerList({ pageNum: 1, pageSize: -1, params: [] })]).then(
        ([res2, res3]) => {
          this.websitList = res2.data
          this.managerList = res3.data.records
          this.formDialog = true
        }
      )
    },
    // 打开详情弹窗
    openDetailForm(row) {
      Promise.all([
        letterManagerDetailUser({ id: row.id }),
        getWebsit({ status: true }),
        letterManagerList({ pageNum: 1, pageSize: -1, params: [] })
      ]).then(([res1, res2, res3]) => {
        this.websitList = res2.data
        this.managerList = res3.data.records
        this.formData = { ...res1.data }
        this.formDialog = true
      })
    },
    handleClose() {
      this.$refs?.formRef?.resetFields()
      this.$data.formData = this.$options.data().formData
      this.formDialog = false
    },
    // 操作按钮
    operation() {
      return this.operationBtn({
        edit: {
          click: ({ row, index, column }) => {
            this.openDetailForm(row)
          }
        },
        del: {
          conditions: ({ row, index, column }) => {
            return true
          },
          prompt: '确定删除?',
          click: ({ row, index, column }) => {
            letterManagerDelUser({
              id: row.id
            })
              .then(res => {
                this.$refs.pageRef.refreshList()
                this.$message({
                  type: 'success',
                  message: `删除成功!`
                })
              })
              .catch(err => {
                console.log(err)
              })
          }
        }
      })
    },
    // 保存
    save() {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          ;(this.formData?.id ? letterManagerUpdateUser : letterManagerAddUser)(this.formData).then(res => {
            this.$message({
              type: 'success',
              message: '保存成功'
            })
            this.handleClose()
            this.$refs.pageRef.refreshList()
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
