<template>
  <div class="app-container">

    <!-- 搜索工作栏 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="部门" prop="deptId">
        <el-select v-model="queryParams.deptId" style="width: 300px;" placeholder="请选择部门">
          <el-option v-for="item in this.deptData" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="目标类型" prop="targetType">
        <dict-selector :type="DICT_TYPE.TARGET_TYPE" v-model="queryParams.targetType" formatter="number"/>
      </el-form-item>
      <el-form-item label="运输方式" prop="transportType">
        <dict-selector :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model="queryParams.transportType" formatter="number"/>
      </el-form-item>
      <el-form-item label="出货渠道" prop="shippingChannel">
        <el-select v-model="queryParams.shippingChannel" placeholder="请选择出货渠道">
          <el-option v-for="item in channelList" :label="item.nameZh" :value="item.channelId"
                     :key="item.channelId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作工具栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                   v-hasPermi="['ecw:dept-target:create']">目标设置
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 列表 -->
    <el-table v-loading="loading" :data="list">
      <el-table-column label="目标名称" align="center" width="180">
        <template slot-scope="scope">
          <span>{{scope.row.deptName}}{{scope.row.targetPeriodName}}目标</span>
        </template>
      </el-table-column>
      <el-table-column label="部门" align="center" prop="deptName"/>
      <el-table-column label="目标类型" align="center" prop="targetType">
        <template slot-scope="scope">
          <dict-tag :type="DICT_TYPE.TARGET_TYPE" :value="scope.row.targetType"/>
        </template>
      </el-table-column>
      <el-table-column label="时间范围" align="center" prop="targetPeriodName">
        <template slot-scope="scope">
          <span>{{dateFormat(scope.row.startTime)}}~{{dateFormat(scope.row.endTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="部门人数" align="center" prop="deptEmpCount"/>
      <el-table-column label="目标方数" align="center" prop="cubeNum"/>
      <el-table-column label="运输方式" align="center" prop="transportType">
        <template slot-scope="scope">
          <dict-tag :type="DICT_TYPE.TRANSPORT_TYPE" :value="scope.row.transportType"/>
        </template>
      </el-table-column>
      <el-table-column label="出货渠道" align="center" prop="shippingChannel">
        <template slot-scope="scope">
          <span>{{ getShipChannelName(scope.row.shippingChannel) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="已完成方数" align="center" prop="completeCubeNum"/>
      <el-table-column label="完成比例" align="center">
        <template slot-scope="scope">
          <span>{{ (scope.row.completeCubeNum/scope.row.cubeNum*100).toFixed(2)+'%' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                     v-hasPermi="['ecw:dept-target:update']">修改
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                     v-hasPermi="['ecw:dept-target:delete']">删除
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-search" @click="handleView(scope.row)"
                     v-hasPermi="['ecw:dept-target:create']"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                @pagination="getList"/>

    <!-- 对话框(添加 / 修改) -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="部门" prop="deptId">
          <el-select v-model="form.deptId" style="width: 300px;" placeholder="请选择部门">
            <el-option v-for="item in this.deptData" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="目标类型" prop="targetType">
          <el-select v-model="form.targetType" placeholder="请选择运输方式" @change="changeList">
            <el-option v-for="dict in getDictDatas(DICT_TYPE.TARGET_TYPE)"
                       :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"/>
          </el-select>
        </el-form-item>
        <el-form-item label="计算周期" prop="targetPeriodName">
          <el-select v-model="form.targetPeriodName" placeholder="请选择计算周期" @change="setTime">
            <el-option v-for="item in targetPeriod" :label="item.name" :value="item.name" :key="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运输方式" prop="transportType">
          <dict-selector :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model="form.transportType" formatter="number"/>
        </el-form-item>
        <el-form-item label="出货渠道" prop="shippingChannel">
          <el-select v-model="form.shippingChannel" placeholder="请选择出货渠道">
            <el-option v-for="item in channelList" :label="item.nameZh" :value="item.channelId"
                       :key="item.channelId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="立方数" prop="cubeNum">
          <el-input v-model="form.cubeNum" placeholder="请输入立方数"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!--人员目标进度-->
    <el-dialog title="人员目标进度" :visible.sync="tableOpen" width="1000px" append-to-body>
      <div><span><b>{{detail.deptName}}-{{getDictDataLabel(DICT_TYPE.TARGET_TYPE,detail.targetType)}}</b></span></div>
      <div>
        <span>运输方式：</span><span>{{getDictDataLabel(DICT_TYPE.TRANSPORT_TYPE,detail.transportType)}}</span>
        <span>出货渠道：</span><span>{{ getShipChannelName(detail.shippingChannel) }}</span>
        <span>部门目标：</span><span>{{detail.cubeNum}}</span>
      </div>
      <el-table v-loading="loading" :data="tableList">
        <el-table-column label="员工名称" align="center" width="180">
          <template slot-scope="scope">
            <span>{{scope.row.userName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="部门" align="center">
          <template>
            <span>{{detail.deptName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="目标类型" align="center" prop="targetType">
          <template slot-scope="scope">
            <dict-tag :type="DICT_TYPE.TARGET_TYPE" :value="scope.row.targetType"/>
          </template>
        </el-table-column>
        <el-table-column label="时间范围" align="center" prop="targetPeriodName">
          <template slot-scope="scope">
            <span>{{dateFormat(scope.row.startTime)}}~{{dateFormat(scope.row.endTime)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="个人目标方数" align="center" prop="personalCubeNum"/>
        <el-table-column label="已完成方数" align="center" prop="personalCompleteCubeNum"/>
        <el-table-column label="完成比例" align="center">
          <template slot-scope="scope">
            <span>{{ (scope.row.personalCompleteCubeNum/scope.row.personalCubeNum*100).toFixed(2)+'%' }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <pagination v-show="tableTotal > 0" :total="tableTotal" :page.sync="tableQueryParams.pageNo"
                  :limit.sync="tableQueryParams.pageSize"
                  @pagination="getTableList"/>
    </el-dialog>

  </div>
</template>

<script>
    import {
        createDeptTarget,
        updateDeptTarget,
        deleteDeptTarget,
        getDeptTarget,
        getDeptTargetPage,
        exportDeptTargetExcel,
        getCreateInitData,
        getPersonTargetPage
    } from "@/api/ecw/deptTarget";
    import {listSimpleDepts} from "@/api/system/dept";
    import {getChannelList} from '@/api/ecw/channel';
    import dayjs from "dayjs";

    export default {
        name: "DeptTarget",
        components: {},
        data() {
            return {
                // 遮罩层
                loading: true,
                // 导出遮罩层
                exportLoading: false,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                tableTotal: 0,
                // 部门业绩目标设置列表
                list: [],
                tableList: [],
                // 弹出层标题
                title: "",
                detail: {
                    deptName: null,
                    targetType: null,
                    cubeNum: null,
                    shippingChannel: null,
                    transportType: null,
                },
                // 是否显示弹出层
                open: false,
                tableOpen: false,
                dateRangeCreateTime: [],
                dateRangeStartTime: [],
                dateRangeEndTime: [],
                deptData: [],
                deptArr: [],
                channelList: [],
                monthList: [],
                quarterList: [],
                yearList: [],
                targetPeriod: [],
                // 查询参数
                queryParams: {
                    pageNo: 1,
                    pageSize: 10,
                    deptId: null,
                    targetType: null,
                    targetPeriodName: null,
                    transportType: null,
                    shippingChannel: null,
                    cubeNum: null,
                },
                tableQueryParams: {
                    pageNo: 1,
                    pageSize: 10,
                    id: null,
                },
                // 表单参数
                form: {},
                // 表单校验
                rules: {
                    deptId: [{required: true, message: "部门ID不能为空", trigger: "blur"}],
                    targetType: [{required: true, message: "目标类型不能为空", trigger: "change"}],
                    cubeNum: [{required: true, message: "立方数不能为空", trigger: "blur"}],
                }
            };
        },
        computed: {
            getShipChannelName() {
                return shippingChannelId => {
                    for (let index in this.channelList) {
                        let channelItem = this.channelList[index];
                        if (channelItem.channelId == shippingChannelId) {
                            return channelItem.nameZh;
                        }
                    }
                    return '/'
                }
            }
        },
        created() {
            listSimpleDepts().then(res => {
                res.data.forEach((item) => {
                    if (item.parentId == 0) {

                        this.deptArr.push(item)

                    } else {
                        this.deptData.push(item)
                    }
                })
                this.deptData.forEach((value) => {
                    var dept = this.deptArr.filter(itt => itt.id == value.parentId)
                    if (dept.length > 0) {
                        value.name = dept[0].name + ' | ' + value.name
                    }

                })
            });
            getCreateInitData().then(res => {
                this.monthList = res.data.month;
                this.quarterList = res.data.quarter;
                this.yearList = res.data.year;
            });
            this.getChannelList();
            this.getList();
        },
        methods: {
            getChannelList() {
                getChannelList().then(res => this.channelList = res.data)
            },
            dateFormat(val) {
                return dayjs(val).format("YYYY-MM-DD");
            },
            changeList(val) {
                if (val === 1) {
                    this.form.targetPeriodName = undefined;
                    this.targetPeriod = this.monthList;
                } else if (val === 2) {
                    this.form.targetPeriodName = undefined;
                    this.targetPeriod = this.quarterList;
                } else {
                    this.form.targetPeriodName = undefined;
                    this.targetPeriod = this.yearList;
                }
            },
            setTime(item) {
                this.targetPeriod.forEach((i, index) => {
                    if (i.name === item) {
                        this.form.startTime = i.startDate;
                        this.form.endTime = i.endDate;
                    }
                })
            },
            /** 查询列表 */
            getList() {
                this.loading = true;
                // 处理查询参数
                let params = {...this.queryParams};
                this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
                this.addBeginAndEndTime(params, this.dateRangeStartTime, 'startTime');
                this.addBeginAndEndTime(params, this.dateRangeEndTime, 'endTime');
                // 执行查询
                getDeptTargetPage(params).then(response => {
                    this.list = response.data.list;
                    this.total = response.data.total;
                    this.loading = false;
                });
            },
            /** 取消按钮 */
            cancel() {
                this.open = false;
                this.reset();
            },
            /** 表单重置 */
            reset() {
                this.form = {
                    id: undefined,
                    deptId: undefined,
                    targetType: undefined,
                    targetPeriodName: undefined,
                    startTime: undefined,
                    endTime: undefined,
                    transportType: undefined,
                    shippingChannel: undefined,
                    cubeNum: undefined,
                };
                this.resetForm("form");
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNo = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.dateRangeCreateTime = [];
                this.dateRangeStartTime = [];
                this.dateRangeEndTime = [];
                this.resetForm("queryForm");
                this.handleQuery();
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.targetPeriod = this.monthList;
                this.reset();
                this.open = true;
                this.title = "添加部门业绩目标设置";
            },
            /** 查看人员目标情况 */
            handleView(row) {
                this.detail = row;
                this.tableQueryParams.id = row.id;
                this.getTableList();
                this.tableOpen = true;
            },
            getTableList() {
                getPersonTargetPage(this.tableQueryParams).then(res => {
                    this.tableList = res.data.list;
                    this.tableTotal = res.data.total;
                });
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.reset();
                const id = row.id;
                getDeptTarget(id).then(response => {
                    this.form = response.data;
                    if (response.data.targetType === 1) {
                        this.targetPeriod = this.monthList;
                    } else if (response.data.targetType === 2) {
                        this.targetPeriod = this.quarterList;
                    } else {
                        this.targetPeriod = this.yearList;
                    }
                    this.open = true;
                    this.title = "修改部门业绩目标设置";
                });
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (!valid) {
                        return;
                    }
                    // 修改的提交
                    if (this.form.id != null) {
                        updateDeptTarget(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                        return;
                    }
                    // 添加的提交
                    createDeptTarget(this.form).then(response => {
                        this.$modal.msgSuccess("新增成功");
                        this.open = false;
                        this.getList();
                    });
                });
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const id = row.id;
                this.$modal.confirm('是否确认删除部门业绩目标设置编号为"' + id + '"的数据项?').then(function () {
                    return deleteDeptTarget(id);
                }).then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                }).catch(() => {
                });
            },
            /** 导出按钮操作 */
            handleExport() {
                // 处理查询参数
                let params = {...this.queryParams};
                params.pageNo = undefined;
                params.pageSize = undefined;
                this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
                this.addBeginAndEndTime(params, this.dateRangeStartTime, 'startTime');
                this.addBeginAndEndTime(params, this.dateRangeEndTime, 'endTime');
                // 执行导出
                this.$modal.confirm('是否确认导出所有部门业绩目标设置数据项?').then(() => {
                    this.exportLoading = true;
                    return exportDeptTargetExcel(params);
                }).then(response => {
                    this.$download.excel(response, '${table.classComment}.xls');
                    this.exportLoading = false;
                }).catch(() => {
                });
            }
        }
    };
</script>