<template>
  <div class="leading-secretary">
    <header-search
      search-tips="秘书姓名/共享流程关键词"
      :deldisabled="!(selectedRows && selectedRows.length)"
      @search-by-key="searchByKey"
      @handle-add="addSecretary"
      @handle-del="delMultiple"
    />

    <div class="content-table">
      <el-table
        v-loading="loading"
        border
        :data="rows"
        :height="tableHeight + 'px'"
        @selection-change="selectionChange"
      >
        <el-table-column
          align="center"
          type="selection"
          width="50"
        ></el-table-column>

        <el-table-column
          type="index"
          label="序号"
          width="100"
        ></el-table-column>

        <el-table-column
          label="秘书姓名"
          prop="secretaryName"
          width="250"
        ></el-table-column>

        <el-table-column label="共享类型">
          <template #default="{ row }">
            <span v-if="row.shareType == 1" class="define same-style">
              流程定义
            </span>
            <span v-if="row.shareType == 2" class="classify same-style">
              流程分类
            </span>
          </template>
        </el-table-column>

        <el-table-column label="共享流程" prop="shareName"></el-table-column>

        <el-table-column label="是否启用" width="150">
          <template #default="{ row, $index }">
            <div>
              <el-switch
                v-model="row.enabled"
                size="mini"
                active-value="1"
                inactive-value="0"
                :active-color="themeColor"
                inactive-color="#e9e9e9"
                @change="setSecretaryStatus(row, $index)"
              ></el-switch>
              <span style="margin-left: 5px">
                {{ row.enabled == '1' ? '启用' : '禁用' }}
              </span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button type="text" @click="handleEdit(row)">修改</el-button>
            <el-button type="text" @click="delSingle(row)">删除</el-button>
          </template>
        </el-table-column>
        <template slot="empty">
          <el-image :src="tableNoDataImg"></el-image>
          <p class="no-data-text">暂无数据</p>
        </template>
      </el-table>

      <el-row type="flex" justify="end" class="my-pagination">
        <el-pagination
          background
          :total="pagination.total"
          :page-size="pagination.pageSize"
          :current-page="pagination.page"
          :page-sizes="pageSizes"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </el-row>
    </div>

    <secretary-dialog
      :edit-row="editRow"
      :secretary-dialog-visible.sync="secretaryDialogVisible"
      @secretary-change="search"
    />
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import personalSetting from '@/mixins/personalSetting'
  import SecretaryDialog from './components/SecretaryDialog'
  import HeaderSearch from '@/views/personal/components/HeaderSearch'
  import { getSecretarylist, delSecretary, saveSecretary } from '@/api/personal'
  export default {
    name: 'LeadingSecretary',
    components: {
      HeaderSearch,
      SecretaryDialog,
    },
    mixins: [personalSetting],
    data() {
      return {
        rows: [],
        editRow: null,
        loading: false,
        formDisabled: false,
        secretaryDialogVisible: false,
      }
    },
    computed: {
      ...mapGetters({
        themeColor: 'settings/themeColor',
      }),
    },
    mounted() {
      this.search()
    },
    methods: {
      addSecretary() {
        this.editRow = null
        this.secretaryDialogVisible = true
      },
      setSecretaryStatus(row, index) {
        const str = row.enabled === '1' ? '启用' : '禁用'
        this.$confirm(`是否确定${str}该领导秘书？`, '提示', {
          type: 'warning',
        })
          .then(() => {
            saveSecretary(row).then((res) => {
              if (res.state) {
                this.rows.splice(index, 1, row)
                this.$message.success(`已${str}`)
              }
            })
          })
          .catch(() => {
            if (row.enabled === '1') {
              row.enabled = '0'
            } else {
              row.enabled = '1'
            }
          })
      },
      delMultiple() {
        if (!this.selectedRows.length) {
          this.$message.warning('请选择要删除的数据')
          return
        }
        const delIds = this.selectedRows.map((item) => item.id)
        this.handleDelete(delIds, '确定删除所选中的数据吗？')
      },
      delSingle({ id }) {
        this.handleDelete(id, '确定删除该条数据吗？')
      },
      handleDelete(ids, tips) {
        this.$confirm(tips, '提示', {
          type: 'warning',
        })
          .then(() => {
            delSecretary(ids).then((res) => {
              if (res.state) {
                this.search()
                this.$message.success(res.message)
              }
            })
          })
          .catch(() => {})
      },
      handleEdit(row) {
        this.editRow = row
        this.secretaryDialogVisible = true
      },
      searchByKey(searchKey) {
        this.search('', searchKey)
      },
      search(isPageChange, searchKey) {
        this.loading = true
        if (!isPageChange) {
          this.pagination.page = 1
        }
        const queryFilter = {
          pageBean: this.pagination,
        }
        if (searchKey != null && searchKey !== '') {
          queryFilter.querys = [
            {
              property: 'secretary_Name_',
              value: searchKey,
              group: 'ssmain',
              operation: 'LIKE',
              relation: 'OR',
            },
            {
              property: 'share_Name_',
              value: searchKey,
              group: 'ssmain',
              operation: 'LIKE',
              relation: 'OR',
            },
          ]
        }
        getSecretarylist(queryFilter).then((data) => {
          if (data) {
            this.pagination = {
              page: data.page,
              pageSize: data.pageSize,
              total: data.total,
            }
            this.rows = data.rows ? data.rows : []
          }
          setTimeout(() => {
            this.loading = false
          }, 300)
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .same-style {
    display: inline-block;
    padding: 0 8px;
    border-radius: $base-border-radius;
  }
  .define {
    color: #002afe;
    background: rgba(0, 42, 254, 0.08);
  }
  .classify {
    color: var(--themeColor);
    background-color: rgba(var(--themeColorRgb), 0.08);
  }
</style>