<template>
  <div v-loading="pageLoading" class="app-container">
    <div style="padding-bottom: 10px;">
      <span style="padding-right: 20px;font-size: 16px;font-weight: bold;">{{ $t('agentProjectStatistics.year') }}</span>
      <el-date-picker
        v-model="queryParams.yearParam"
        type="year"
        placeholder="选择年份"
        format="yyyy"
        :clearable="false"
        :editable="false"
        @change="yearParamChange"
      >
      </el-date-picker>
      <el-button style="margin-left: 10px;" type="primary" icon="el-icon-search" size="mini" @click="getList">{{ $t('common.search') }}
      </el-button>
    </div>
    <card-table :delProp="[]" :loading="loading" :modalData="list" :searchParams="queryParams"
                :tableSearch="true" labelWidth="120px" @columnSearch="handleQuery" @pagination="getList" :max-height="$store.getters.tableMaxHeight"
                @resetList="resetQuery" @sortChange="sortChange" show-no
    >
      <template #operations="{ selections }">
        <el-button v-hasPermi="['bt:business:quotation:export']" icon="el-icon-download" plain size="mini"
                   @click="handleExport">{{ $t('common.export') }}
        </el-button>
      </template>
      <template #default="{ list }">
        <!--区域-->
<!--        <Column :label="$t('project.area')" prop="areaName" show-search :searchParams="queryParams"/>-->
        <Column v-if="showAreaColumn" :label="$t('project.area')" prop="areaId" :searchParams="queryParams"
                :searchDict="areaList" :showSearch="true" valueProp="first" labelProp="second"
                searchType="select" selectMore />
        <!--国家-->
<!--        <Column :label="$t('project.countryId')" prop="countryName" show-search :searchParams="queryParams"/>-->
        <Column :label="$t('account.country')" prop="countryId" :searchParams="queryParams" :showSearch="true"
                valueProp="first" labelProp="second" searchType="select"
                :searchDict="countryList" select-more />
        <!--城市-->
        <Column :label="$t('project.city')" prop="city" show-search :searchParams="queryParams"/>
        <!--代理商名-->
<!--        <Column :label="$t('lead.agent')" prop="ownerAgentName" show-search :searchParams="queryParams"/>-->
        <Column :label="$t('agentCompleteOrder.agentName')" prop="agentId" :showSearch="true" search-type="select"
                :searchParams="queryParams" :search-dict="agentList" select-more value-prop="agentId"
                label-prop="agentName"
                width="250px">
          <template #default="{ row }">
            <span>{{
                row.agentName == 'common.head' ? $t(row.agentName) :
                  row.agentName
              }}</span>
          </template>
        </Column>
        <!--出货台数-->
        <Column :label="$t('agentCompleteOrder.shippedQty')" prop="shippedQty"  />
        <!--出货金额-->
        <Column :label="$t('agentCompleteOrder.shippedPrice')" prop="shippedPrice" align="right" />
      </template>
    </card-table>
  </div>
</template>

<script>
import {getAgentCompleteOrderList} from "@/api/board/projectFollow";
import {getAreaList, getCountryList} from "@/api/business/crm/project";
import {selectForYear} from "@/api/user/agent";

export default {
  name: "AgentCompleteOrder",
  data() {
    return {
      // 遮罩层
      loading: false,
      queryParams:{
        pageNum: 1,
        pageSize: 10,
        total: 0,
        language: this.$i18n.locale,
        yearParam:'2024',

      },
      list:[],
      areaList: [],
      countryList: [],
      agentList: [],
    }
  },
  computed:{
    showAreaColumn() {
      // VP 、总经理
      // const allowedRoles = ["sales_director", "manager"];
      // return allowedRoles.some(role => this.$store.getters.roles.includes(role));
      // 不可见的角色： 区总、销售经理、代理商经理、代理商销售、销售支持 暂不考虑多角色比如又是销售又是vp角色
      const invisibleRoles = ['area_sales_director', 'sales_manager', 'agent_manager', 'agent_sales', 'sales_support'];
      return !this.$store.getters.roles.some(role => invisibleRoles.includes(role));
    },
  },
  created() {
    this.handleQuery()
    this.getAgentList();
  },
  methods:{
    /** 导出按钮操作 */
    handleExport() {
      this.download('/board/exportAgentCompleteOrder', {
        ...this.queryParams,
        'showColumn':this.showAreaColumn
      }, `代理商成单统计_${new Date().getTime()}.xlsx`)
    },
    yearParamChange(date){
      const year = date.getFullYear();
      const yearString = `${year}`;
      this.queryParams.yearParam = yearString;
      this.handleQuery()
      this.getAgentList()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 查询列表数据 */
    async getList() {
      this.loading = true;
      await getAgentCompleteOrderList(this.queryParams).then(response => {
        this.list = response.rows;
        this.queryParams.total = response.total;
        this.loading = false;
      }).finally(() => {
        this.loading = false;
      })
      this.getAreaList();
      this.getNationList();
    },
    getAreaList() {
      getAreaList().then(res => {
        this.areaList = res.data;
      })
    },
    /** 获取所有国家列表 */
    getNationList() {
      getCountryList().then(response => {
        this.countryList = response.data
      })
    },
    getAgentList() {
      selectForYear(this.queryParams.yearParam).then(res => {
        this.agentList = res.data;
        if (this.userInfo.deptId == 0) {
          this.agentList.unshift({agentId: 0, agentName: this.$t('common.head')});
        }
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$set(this.queryParams, 'agentNo', null);
      this.$set(this.queryParams, 'agentName', null);
      this.$set(this.queryParams, 'areaId', null);
      this.$set(this.queryParams, 'agentType', null);
      this.$set(this.queryParams, 'agentLevel', null);
      this.handleQuery();
    },
  },
}
</script>

<style scoped>

</style>
