<template>
  <div class="delegate-setting">
    <header-search
      search-tips="标题关键词"
      :deldisabled="!(selectedRows && selectedRows.length)"
      @search-by-key="searchByKey"
      @handle-add="addDelagation"
      @handle-del="delDelagation"
    />

    <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="subject"
          width="250"
        ></el-table-column>

        <el-table-column label="任务代理人" prop="authName"></el-table-column>

        <el-table-column label="被任务代理人" prop="agent"></el-table-column>

        <el-table-column label="开始日期" prop="startDate"></el-table-column>

        <el-table-column label="结束日期" prop="endDate"></el-table-column>

        <el-table-column label="任务代理类型" width="150">
          <template #default="{ row }">
            <span v-if="row.type == 1" class="all same-style">
              全权任务代理
            </span>
            <span v-if="row.type == 2" class="part same-style">
              部分任务代理
            </span>
          </template>
        </el-table-column>

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

        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button type="text" @click="handleRowClick(row, 'edit')">
              修改
            </el-button>
            <el-button type="text" @click="handleRowClick(row, 'check')">
              明细
            </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>

    <delegate-dialog
      :edit-row-id="editRowId"
      :dialog-title="dialogTitle"
      :form-disabled="formDisabled"
      :delegate-dialog-visible.sync="delegateDialogVisible"
      @agentChange="agentChange"
      @recoverState="formDisabled = false"
    />
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import personalSetting from '@/mixins/personalSetting'
  import DelegateDialog from './components/DelegateDialog'
  import HeaderSearch from '@/views/personal/components/HeaderSearch'
  import { agentSave, getAgentList, delAgentList } from '@/api/personal'
  export default {
    name: 'DelegateSetting',
    components: {
      HeaderSearch,
      DelegateDialog,
    },
    mixins: [personalSetting],
    data() {
      return {
        rows: [],
        editRowId: '',
        loading: false,
        dialogTitle: '添加任务代理',
        formDisabled: false,
        delegateDialogVisible: false,
      }
    },
    computed: {
      ...mapGetters({
        themeColor: 'settings/themeColor',
      }),
    },
    mounted() {
      this.search()
    },
    methods: {
      agentChange() {
        this.search()
      },
      setAgentStatus(row, index) {
        const str = row.isEnabled === 'Y' ? '启用' : '禁用'
        this.$confirm(`是否确定${str}该任务代理？`, '提示', {
          type: 'warning',
        })
          .then(() => {
            agentSave(row).then((res) => {
              if (res.state) {
                this.rows.splice(index, 1, row)
                this.$message.success(`已${str}`)
              }
            })
          })
          .catch(() => {
            if (row.isEnabled === 'Y') {
              row.isEnabled = 'N'
            } else {
              row.isEnabled = 'Y'
            }
          })
      },
      addDelagation() {
        this.editRowId = ''
        this.delegateDialogVisible = true
      },
      delSingle({ id }) {
        this.handleDelete(id, '确定删除该任务代理吗？')
      },

      delDelagation() {
        if (!this.selectedRows.length) {
          this.$message.warning('请选择要删除的任务代理')
          return
        }
        const delIds = this.selectedRows.map((item) => item.id)
        this.handleDelete(delIds, '确定删除所选中的任务代理吗？')
      },
      handleDelete(ids, tips) {
        this.$confirm(tips, '提示', {
          type: 'warning',
        }).then(() => {
          delAgentList(ids).then((res) => {
            if (res.state) {
              this.search()
              this.$message.success(res.message)
            }
          })
        })
      },
      handleRowClick(row, type) {
        this.dialogTitle = '编辑任务代理'
        this.formDisabled = false
        if (type === 'check') {
          this.formDisabled = true
          this.dialogTitle = '任务代理详情'
        }
        this.editRowId = row.id
        this.delegateDialogVisible = 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: 'subject_',
              group: 'main',
              operation: 'LIKE',
              relation: 'OR',
              value: searchKey,
            },
          ]
        }
        getAgentList(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;
  }
  .part {
    color: #002afe;
    background: rgba(0, 42, 254, 0.08);
  }
  .all {
    color: var(--themeColor);
    background-color: rgba(var(--themeColorRgb), 0.08);
  }
</style>
