<template>
  <div class="app-container">
    <SearchForm v-show="showSearch" ref="SearchForm" :options="options" @search="_getTableList" />
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button v-hasPermi="['zs:sign:add']" type="primary" icon="el-icon-plus" @click="handleAddAndUpdate(undefined)">新增</el-button>
        <el-button v-if="admin == 'true'" v-hasPermi="['zs:sign:export']" type="warning" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
      </el-col>
      <right-toolbar :show-search.sync="showSearch" :columns="columns" @queryTable="_getTableList" />
    </el-row>

    <!-- 表格 -->
    <el-table v-loading="loading" :data="tableDataList" stripe size="mini" border @sort-change="changeSort">
      <el-table-column type="index" width="50" align="center" />
      <template v-for="item in columns">
        <el-table-column v-if="item.visible && item.prop === 'state'" :key="item.prop" :label="item.label" align="center" :width="item.width" :prop="item.prop">
          <template slot-scope="{row}">
            <el-button v-if="row.state" type="success" size="mini">全款</el-button>
            <el-button v-else type="warning" size="mini">未全款</el-button>
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.visible" :key="item.prop" :label="item.label" align="center" :width="item.width" :prop="item.prop" :show-overflow-tooltip="item.overflow" />
      </template>
      <el-table-column align="center" width="100" fixed="right" label="审核状态">
        <template slot-scope="{row}">
          <el-button v-if="row.checkState == 1" type="danger" size="mini">待审核</el-button>
          <el-button v-else-if="row.checkState == 2" type="success" size="mini">已审核</el-button>
          <el-button v-else-if="row.checkState == 3" type="warning" size="mini">驳回</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="160">
        <template slot-scope="{row}">
          <el-button v-show="row.checkState == 0 || row.checkState == 3" v-hasPermi="['zs:sign:edit']" size="mini" type="text" icon="el-icon-edit" @click="handleAddAndUpdate(row)">修改</el-button>
          <el-button v-if="row.checkState == 1" v-hasPermi="['zs:sign:check']" size="mini" type="text" @click="handleCheck(row)">审核</el-button>
          <el-button v-hasPermi="['zs:sign:remove']" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize" @pagination="_getTableList" />

    <!-- 引入成交登记弹框  -->
    <SignFormDialog v-if="dialog.signVisible" ref="signDialogForm" :dialog-visible="dialog.signVisible" @refreshDataList="_getTableList" />

    <!-- 引入审核弹框  -->
    <CheckDialog v-if="dialog.checkVisible" ref="checkDialogForm" :dialog-visible="dialog.checkVisible" @refreshDataList="_getTableList" />

    <!-- 导入对话框 -->
    <UploadDialog v-if="dialog.uploadVisible" />
  </div>
</template>

<script>
import { getSignList, exportData, deleteSign } from '@/api/zs/sign';
import empApi from '@/api/system/employee';
import CheckDialog from './components/CheckDialog';
import SearchForm from './components/SearchForm.vue';
import SignFormDialog from './components/SignFormDialog.vue';
import { defaultColumns } from './columns.js';
import UploadDialog from './components/UploadDialog.vue';

export default {
  name: 'Sign',
  components: {
    SearchForm,
    CheckDialog,
    SignFormDialog,
    UploadDialog
  },
  data() {
    return {
      admin: localStorage.getItem('admin'),
      userId: localStorage.getItem('userId'),
      searchForm: {
        pageNum: 1,
        pageSize: 10
      },
      loading: false,
      columns: [],
      tableDataList: [],
      total: 0,
      userOptions: [],
      schoolOptions: [],
      moneyStateOptions: [],
      percentageOptions: [
        {
          value: '驾校已结算',
          label: '驾校已结算'
        },
        {
          value: '提成已发放',
          label: '提成已发放'
        }
      ],
      areaOptions: [],
      showSearch: true,
      dialog: {
        signVisible: false,
        checkVisible: false,
        uploadVisible: false
      },
      options: {
        userOptions: [],
        schoolOptions: [],
        areaOptions: [],
        moneyStateOptions: [],
        sourceOptions: []
      }
    };
  },
  created() {
    const str = localStorage.getItem(`${this.$route.name}-table-columns`);
    this.columns = str ? JSON.parse(str) : defaultColumns;
    // 回款状态
    this.getDicts('dm_money_state').then((response) => {
      this.options.moneyStateOptions = response.data;
    });
    // s所属区域
    this.getDicts('dm_area').then((response) => {
      this.options.areaOptions = response.data;
    });
    // s所属区域
    this.getDicts('dm_source').then((response) => {
      this.options.sourceOptions = response.data;
    });
    this.getSchools();
    this._getTableList();
    this.getEmployee();
  },
  methods: {
    // 搜索
    handleQuery() {
      this.searchForm.pageNum = 1;
      this._getTableList();
    },
    _getTableList() {
      this.loading = true;
      const tempForm = this.$refs.SearchForm?.searchForm || {};
      const params = { ...this.searchForm, ...tempForm };
      getSignList(params).then(
        (response) => {
          this.tableDataList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    getSchools() {
      empApi.pageList().then((resp) => {
        this.options.schoolOptions = resp.data;
      });
    },

    /** 导出按钮操作 */
    handleExport() {
      this.$confirm('是否确认导出所有成交记录项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then((resp) => {
          const tempForm = this.$refs.SearchForm?.searchForm || {};
          this.download('zs/sign/export', tempForm, `登记信息_${new Date().getTime()}.xlsx`);
        })
        .catch(function () { });
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = '成交记录导入';
      this.upload.open = true;
    },
    /** 查询员工 */
    getEmployee() {
      empApi.getEmployee().then((resp) => {
        if (resp.code == 200) {
          this.options.userOptions = resp.data;
        }
      });
    },
    changeSort(val) {
      if (val.order) {
        this.searchForm.orderName = val.prop;
        if (val.order == 'ascending') {
          this.searchForm.orderType = 'asc';
        } else {
          this.searchForm.orderType = 'desc';
        }
      } else {
        this.searchForm.orderName = '';
        this.searchForm.orderType = '';
      }
      this.getPageList();
    },
    handleAddAndUpdate(item) {
      this.dialog.signVisible = true;
      this.$nextTick(() => {
        this.$refs.signDialogForm.init(item);
      });
    },
    handleDelete(item) {
      this.$confirm(
        '是否确认删除该条登记（“' + item.name + '/' + item.phone + '”）?',
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then((res) => {
          deleteSign({ signId: item.signId }).then((resp) => {
            if (resp.code == 200) {
              this.$message.success('删除成功');
              this.getPageList();
            } else {
              // this.$message.error("删除失败:" + resp.msg);
            }
          });
        })
        .catch(function () { });
    },

    handleCheck(item) {
      this.dialog.checkVisible = true;
      this.$nextTick(() => {
        this.$refs.checkDialogForm.init(item);
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.el-table .cell {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 23px;
  padding-left: 6px;
  padding-right: 6px;
}

.el-card__body {
  padding: 10px !important;
}

.el-timeline-item__wrapper {
  position: relative;
  padding-left: 20px;
  top: -3px;
  line-height: 25px;
}
</style>