<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading">
      <search
        class="seep-search"
        :approvalList="approvalList"
        user="recycleName"
        @search="reload"
      ></search>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        cache-key="systemRoleTable"
        :pageSize="20"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="openEdit('', 'add')"
            v-if="$hasPermission('eom:aftersalesrealcost:save')"
            >新建</el-button
          >
        </template>
        <template v-slot:code="{ row }">
          <el-link
            type="primary"
            :underline="false"
            @click="openEdit(row, 'view')"
            >{{ row.code }}</el-link
          >
        </template>
        <template v-slot:action="{ row }">
          <el-link
            type="primary"
            v-if="row.approvalStatus == 0 && $hasPermission('eom:aftersalesrealcost:submit')"
            :underline="false"
            @click="openProcess(row)"
            >提交</el-link
          >
          <el-link
            v-if="row.approvalStatus == 0 && $hasPermission('eom:aftersalesrealcost:update')"
            type="primary"
            :underline="false"
            @click="openEdit(row, 'edit')"
            >修改</el-link
          >
          <el-popconfirm
            v-if="(row.approvalStatus == 0 && row.source != 1) && $hasPermission('eom:aftersalesrealcost:delete')"
            class="ele-action"
            title="确定要删除当前费用清单数据吗？"
            @confirm="deleteCost(row)"
          >
            <template v-slot:reference>
              <el-link type="danger" icon="el-icon-delete" :underline="false"
                >删除</el-link
              >
            </template>
          </el-popconfirm>
        </template>
      </ele-pro-table>
    </el-card>
    <costDialog ref="recycleRef" @refresh="reload" />
    <process-submit-dialog
      :isNotNeedProcess="false"
      :processSubmitDialogFlag.sync="processSubmitDialogFlag"
      v-if="processSubmitDialogFlag"
      ref="processSubmitDialogRef"
      @reload="reload"
    ></process-submit-dialog>
  </div>
</template>

<script>
  import processSubmitDialog from '@/BIZComponents/processSubmitDialog/processSubmitDialog.vue';
  import costDialog from './component/costDialog.vue';
  import search from './component/search.vue';
  import {
    costDelete,
    aftersalesrealcost
  } from '@/api/salesServiceManagement/index';
  export default {
    components: {
      search,
      costDialog,
      processSubmitDialog
    },
    data() {
      return {
        // 加载状态
        loading: false,
        processSubmitDialogFlag: false,
        approvalList: [
          {
            label: '未提交',
            value: 0
          },
          {
            label: '审核中',
            value: 1
          },
          {
            label: '审核通过',
            value: 2
          },
          {
            label: '审核不通过',
            value: 3
          },
        //   {
        //     label: '终止审核中',
        //     value: 4
        //   },
        //   {
        //     label: '终止审核通过',
        //     value: 5
        //   },
        //   {
        //     label: '流程废止',
        //     value: 7
        //   }
        ]
      };
    },
    computed: {
      columns() {
        return [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            slot: 'code',
            prop: 'code',
            label: '编码',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'workOrderCode',
            label: '工单编码',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'workOrderName',
            label: '工单名称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'contactName',
            label: '客户名称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'contactCode',
            label: '客户编码',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'approvalStatus',
            label: '流程状态',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (item) => {
              let obj = this.approvalList.find(
                (el) => el.value == item.approvalStatus
              );
              if (obj) {
                return obj.label;
              }
              return '';
            }
          },
          {
            columnKey: 'action',
            slot: 'action',
            label: '操作',
            align: 'center',
            width: 180,
            resizable: false,
            showOverflowTooltip: true
          }
        ];
      }
    },
    created() {},
    methods: {
      /* 表格数据源 */
      async datasource({ page, limit, where, order }) {
        return aftersalesrealcost({ pageNum: page, size: limit, ...where });
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where });
      },

      openEdit(row, type) {
        this.$refs.recycleRef.init(row, type);
      },

      // 提交
      openProcess(data) {
        this.processSubmitDialogFlag = true;
        this.$nextTick(() => {
          let params = {
            businessId: data.id,
            businessKey: 'after_sale_fee',
            formCreateUserId: data.createUserId,
            variables: {
              businessCode: data.code,
              businessName: data.deptId,
              businessType: '售后费用清单'
            }
          };
          this.$refs.processSubmitDialogRef.init(params);
        });
      },
      deleteCost(row) {
        costDelete([row.id]).then((res) => {
          if (res) {
            this.$message.success('操作成功!');
            this.reload();
          }
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-input__inner::placeholder {
    font-size: 13px;
  }
  ::v-deep .seep-search {
    .el-input__inner {
      padding: 0 5px 0 10px;
    }
  }
</style>
