<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="$t('关键字')" prop="key">
        <el-input
          v-model="queryParams.key"
          :placeholder="$t('请输入关键字查找')"
          clearable
        />
      </el-form-item>
      <el-form-item :label="$t('运输方式')" prop="transportType">
        <dict-selector
          :type="DICT_TYPE.ECW_TRANSPORT_TYPE"
          v-model="queryParams.transportType"
          formatter="number"
          clearable
        />
      </el-form-item>
      <el-form-item :label="$t('唛头')" prop="marks">
        <el-input
          v-model="queryParams.marks"
          :placeholder="$t('请输入关键字查找')"
          clearable
        />
      </el-form-item>
      <el-form-item :label="$t('资源类型')" prop="customerType">
        <!-- <el-select clearable  v-model="queryParams.customerType" :placeholder="$t('请选择资源类型')" clearable size="small">
         <el-option v-for="dict in getDictDatas(DICT_TYPE.CUSTOMER_ESOURCE_TYPE)"
                :key="dict.value" :label="dict.label" :value="dict.value"/>
         </el-select> -->
        <dict-selector
          :type="DICT_TYPE.CUSTOMER_ESOURCE_TYPE"
          v-model="queryParams.customerType"
          :placeholder="$t('请选择资源类型')"
          clearable
        ></dict-selector>
      </el-form-item>
      <!--      <el-form-item :label="$t('客户经理')" prop="customerService">
              <el-select clearable  v-model="queryParams.customerService" :placeholder="$t('请选择客户经理')" clearable size="small">
                <el-option v-for="dict in customerServiceList"
                           :key="dict.id" :label="dict.nickname" :value="dict.id"/>
              </el-select>
            </el-form-item> -->
      <!--     <el-form-item prop="customerService">
             <el-select clearable  v-model="queryParams.customerService"  clearable size="small">
               <el-option :label="$t('下单时间')" value="createTime"/>
               <el-option :label="$t('装柜时间')" value="ldBoxTime"/>
             </el-select>
           </el-form-item> -->
      <el-form-item prop="dateFilter">
        <el-date-picker
          v-model="dateFilter"
          type="datetimerange"
          range-separator="-"
          :start-placeholder="$t('开始日期')"
          :end-placeholder="$t('结束日期')"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
        <!--        <el-date-picker v-model="queryParams.beginStartTime" :placeholder="$t('请选择开始时间')" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>-->
      </el-form-item>
      <!--      <el-form-item :label="$t('结束时间')" prop="endStartTime">-->
      <!--        <el-date-picker v-model="queryParams.endStartTime" :placeholder="$t('请选择结束时间')" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>-->
      <!--      </el-form-item>-->
      <el-form-item>
        <el-form-item :label="$t('报价单号')" prop="key">
          <el-input
            v-model="queryParams.number"
            :placeholder="$t('请输入报价单号')"
            clearable
          />
        </el-form-item>
        <el-form-item :label="$t('客户名称')" prop="key">
          <el-input
            v-model="queryParams.name"
            :placeholder="$t('请输入客户名称')"
            clearable
          />
        </el-form-item>
        <el-form-item :label="$t('联系方式')" prop="key">
          <el-input
            v-model="queryParams.phoneNew"
            :placeholder="$t('请输入联系方式')"
            clearable
          />
        </el-form-item>
        <el-form-item :label="$t('客户经理')" prop="userId">
          <el-select
            clearable
            v-model="queryParams.userId"
            :placeholder="$t('请选择客户经理')"
            clearable
            size="small"
          >
            <el-option
              v-for="dict in customerServiceList"
              :key="dict.id"
              :label="dict.nickname"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('始发仓')" prop="startWarehouseId">
          <el-select
            v-model="queryParams.startWarehouseId"
            :placeholder="$t('请选择始发仓')"
            clearable
          >
            <el-option
              v-for="item in exportWarehouseList"
              :label="$l(item, 'title')"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('目的仓')" prop="destWarehouseIdArr">
          <el-select
            :multiple="true"
            v-model="queryParams.destWarehouseIdArr"
            multiple
            :placeholder="$t('请选择目的仓')"
            clearable
          >
            <el-option
              v-for="item in importWarehouseList"
              :label="$l(item, 'title')"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="业绩类型">
          <el-select clearable v-model="queryParams.achieveType">
            <el-option :value="1" label="新客户"></el-option>
            <el-option :value="0" label="旧客户"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">{{
          $t("搜索")
        }}</el-button>
        <el-button type="primary" icon="el-icon-search" @click="resetQuery">{{
          $t("重置")
        }}</el-button>
        <!--        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
                          >{{$t('导出')}}</el-button> -->
      </el-form-item>
    </el-form>
    <total_num :total-data="totalData"></total_num>
    <!-- 列表 -->
    <el-table
      v-loading="loading"
      :data="list"
      @selection-change="handleSelectionChange"
    >
      <!-- <el-table-column :label="$t('序号')" align="center" type="index"></el-table-column> -->
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column :label="$t('资源类型')" align="center">
        <template slot-scope="scope">
          <dict-tag
            :type="DICT_TYPE.CUSTOMER_ESOURCE_TYPE"
            :value="scope.row.customerType"
          />
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('业绩类型')"
        align="center"
        prop="achieveType"
      />
      <el-table-column :label="$t('报价单号')" align="center" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.number }}</span>
        </template>
      </el-table-column>
      <!--      <el-table-column :label="$t('报价结果')" align="center">
              <template slot-scope="scope">
                <dict-tag :type="DICT_TYPE.ECW_OFFER_STATUS" :value="scope.row.offerStatus"/>
              </template>
            </el-table-column> -->
      <el-table-column :label="$t('订单号')" align="center" prop="orderNo" />
      <el-table-column :label="$t('客户名称')" align="center" prop="name" />
      <el-table-column :label="$t('联系方式')" align="center" prop="phoneNew" />
      <el-table-column :label="$t('唛头')" align="center" prop="marks" />
      <el-table-column
        :label="$t('订单状态')"
        align="center"
        prop="statusMsg"
      />
      <el-table-column
        :label="$t('是否控货')"
        align="center"
        prop="isCargoControl"
      >
        <template slot-scope="scope">
          {{ scope.row.isCargoControl ? $t("是") : $t("否") }}
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('重量')"
        align="center"
        prop="completeWeight"
      />
      <el-table-column
        :label="$t('方数')"
        align="center"
        prop="completeVolume"
      />
      <el-table-column
        :label="$t('下单时间')"
        align="center"
        prop="createTime"
      />
      <el-table-column
        :label="$t('业绩创建时间')"
        align="center"
        prop="ldBoxTime"
      />
      <el-table-column
        :label="$t('客户经理')"
        align="center"
        prop="userId"
        :formatter="customerServiceFn"
      >
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  createDeptTarget,
  updateDeptTarget,
  deleteDeptTarget,
  getDeptTarget,
  getDeptTargetPage,
  exportDeptTargetExcel,
  getCreateInitData,
  getPersonTargetPage,
  myAchievementByPage,
} from "@/api/ecw/deptTarget";
import { listSimpleDepts } from "@/api/system/dept";
import { getChannelList } from "@/api/ecw/channel";
import dayjs from "dayjs";
import { listServiceUser } from "@/api/system/user";
import { getWarehouseList } from "@/api/ecw/warehouse";
import Total_num from "@/views/ecw/deptTarget/total_num.vue";

export default {
  name: "EcwDepttargetMyachievement",
  components: { Total_num },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      tableTotal: 0,
      // 部门业绩目标设置列表
      list: [],
      tableList: [],
      // 弹出层标题
      title: "",
      dateFilter: [],
      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,
        beginStartTime: null,
        transportType: null,
        shippingChannel: null,
        endStartTime: null,
      },
      tableQueryParams: {
        pageNo: 1,
        pageSize: 10,
        id: null,
      },
      // 表单参数
      form: {},
      customerServiceList: [],
      // 表单校验
      rules: {
        deptId: [
          {
            required: true,
            message: this.$t("部门ID不能为空"),
            trigger: "blur",
          },
        ],
        targetType: [
          {
            required: true,
            message: this.$t("目标类型不能为空"),
            trigger: "change",
          },
        ],
        cubeNum: [
          {
            required: true,
            message: this.$t("立方数不能为空"),
            trigger: "blur",
          },
        ],
      },
      totalData: {
        companyWeight: 0,
        companyVolume: 0,
        companyNum: 0,
        developWeight: 0,
        developVolume: 0,
        developNum: 0,
        sumWeight: 0,
        sumVolume: 0,
        sumNum: 0,
      },
      myAchievementData: {},
      warehouseList: [],
    };
  },
  computed: {
    getShipChannelName() {
      return (shippingChannelId) => {
        for (let index in this.channelList) {
          let channelItem = this.channelList[index];
          if (channelItem.channelId == shippingChannelId) {
            return this.$l(channelItem, "name");
          }
        }
        return "/";
      };
    },
    exportWarehouseList() {
      /* tradeType 1 进口，2出口，3进出口 */
      return this.warehouseList.filter(
        (item) => item.tradeType == 2 || item.tradeType == 3
      );
    },
    importWarehouseList() {
      return this.warehouseList.filter(
        (item) => item.tradeType == 1 || item.tradeType == 3
      );
    },
  },
  activated() {
    this.getChannelList();
    this.getList();
  },
  created() {
    this.getChannelList();
    this.getList();
    listServiceUser().then((r) => {
      this.customerServiceList = r.data;
    });
    getWarehouseList().then((res) => {
      this.warehouseList = res.data;
    });
  },
  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;
        }
      });
    },
    customerServiceFn(val) {
      if (this.customerServiceList.length > 0) {
        let index = this.customerServiceList.findIndex(
          (item) => item.id === val.userId
        );
        return index !== -1 ? this.customerServiceList[index]?.nickname : "";
      } else {
        return "";
      }
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      const params = { ...this.queryParams };
      if (params.destWarehouseIdArr?.length) {
        params.destWarehouseIds = params.destWarehouseIdArr.join(",");
      }
      // 执行查询
      myAchievementByPage(params).then((response) => {
        this.list = response.data.myAchievementDtos.list;
        this.total = response.data.myAchievementDtos.total;
        this.myAchievementData = response.data;
        this.totalData.sumWeight = this.myAchievementData.totalWeight;
        this.totalData.sumVolume = this.myAchievementData.totalVolume;
        this.totalData.sumNum = this.myAchievementData.totalNum;
        this.totalData.companyWeight =
          this.myAchievementData.companyTotalWeight;
        this.totalData.companyVolume =
          this.myAchievementData.companyTotalVolume;
        this.totalData.companyNum = this.myAchievementData.companyTotalNum;
        this.totalData.developWeight = this.myAchievementData.devTotalWeight;
        this.totalData.developVolume = this.myAchievementData.devTotalVolume;
        this.totalData.developNum = this.myAchievementData.devTotalNum;
        this.$set(
          this.totalData,
          "newTotalNum",
          this.myAchievementData.newTotalNum
        );
        this.$set(
          this.totalData,
          "newTotalVolume",
          this.myAchievementData.newTotalVolume
        );
        this.$set(
          this.totalData,
          "newTotalWeight",
          this.myAchievementData.newTotalWeight
        );
        this.$set(
          this.totalData,
          "oldTotalNum",
          this.myAchievementData.oldTotalNum
        );
        this.$set(
          this.totalData,
          "oldTotalVolume",
          this.myAchievementData.oldTotalVolume
        );
        this.$set(
          this.totalData,
          "oldTotalWeight",
          this.myAchievementData.oldTotalWeight
        );
        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.queryParams.beginStartTime = this.dateFilter[0];
      this.queryParams.endStartTime = this.dateFilter[1];

      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = { page: 1, pageSize: 10 };
      // this.dateFilter = []
      // this.dateRangeCreateTime = [];
      // this.dateRangeStartTime = [];
      // this.dateRangeEndTime = [];
      // this.resetForm("queryForm");
      // this.handleQuery();
      this.getList();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.targetPeriod = this.monthList;
      this.reset();
      this.open = true;
      this.title = this.$t("添加部门业绩目标设置");
    },
    /** 查看人员目标情况 */
    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 = this.$t("修改部门业绩目标设置");
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return;
        }
        // 修改的提交
        if (this.form.id != null) {
          updateDeptTarget(this.form).then((response) => {
            this.$modal.msgSuccess(this.$t("修改成功"));
            this.open = false;
            this.getList();
          });
          return;
        }
        // 添加的提交
        createDeptTarget(this.form).then((response) => {
          this.$modal.msgSuccess(this.$t("新增成功"));
          this.open = false;
          this.getList();
        });
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id;
      this.$modal
        .confirm(
          this.$t("是否确认删除部门业绩目标设置编号为{id}的数据项?", { id })
        )
        .then(function () {
          return deleteDeptTarget(id);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess(this.$t("删除成功"));
        })
        .catch(() => {});
    },
    handleSelectionChange(val) {
      if (val && val.length > 0) {
        var data = {
          companyWeight: 0,
          companyVolume: 0,
          companyNum: 0,
          developWeight: 0,
          developVolume: 0,
          developNum: 0,
          sumWeight: 0,
          sumVolume: 0,
          sumNum: 0,
        };
        val.forEach((item) => {
          if (item.customerType == 1) {
            data.developWeight += item.completeWeight;
            data.developVolume += item.completeVolume;
            data.developNum += item.sumNum;
          } else {
            data.companyWeight += item.completeWeight;
            data.companyVolume += item.completeVolume;
            data.companyNum += item.sumNum;
          }
          data.sumWeight += item.completeWeight;
          data.sumVolume += item.completeVolume;
          data.sumNum += item.sumNum;
        });
        data.developVolume = data.developVolume.toFixed(2);
        data.companyVolume = data.companyVolume.toFixed(2);
        data.sumVolume = data.sumVolume.toFixed(2);
        this.$set(this, "totalData", data);
      } else {
        this.totalData.sumWeight = this.myAchievementData.totalWeight;
        this.totalData.sumVolume = this.myAchievementData.totalVolume;
        this.totalData.sumNum = this.myAchievementData.totalNum;
        this.totalData.companyWeight =
          this.myAchievementData.companyTotalWeight;
        this.totalData.companyVolume =
          this.myAchievementData.companyTotalVolume;
        this.totalData.companyNum = this.myAchievementData.companyTotalNum;
        this.totalData.developWeight = this.myAchievementData.devTotalWeight;
        this.totalData.developVolume = this.myAchievementData.devTotalVolume;
        this.totalData.developNum = this.myAchievementData.devTotalNum;
      }
    },
    /** 导出按钮操作 */
    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(this.$t("是否确认导出所有部门业绩目标设置数据项?"))
        .then(() => {
          this.exportLoading = true;
          return exportDeptTargetExcel(params);
        })
        .then((response) => {
          this.$download.excel(response, `${this.$t("我的业绩")}.xls`);

          this.exportLoading = false;
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped>
.total_num {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
  font-size: 15px;
}

.total_num span {
  margin: 0 8px;
}
</style>