<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form size="small" :inline="true" label-width="100px">
          <el-form-item :label="$t('编号')" prop="number">
            <el-input v-model.trim="followForm.number" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item :label="$t('报价单号')" prop="offerNumber">
            <el-input v-model.trim="followForm.offerNumber" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item :label="$t('联系人')" prop="contactName">
            <el-input v-model.trim="followForm.contactName" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item :label="$t('联系方式')" prop="contactPhone">
            <el-input v-model.trim="followForm.contactPhone" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item :label="$t('客户经理')" prop="salesmanIds">
            <user-selector v-model="followForm.salesmanIds" multiple clearable @change="handleQuery" />
          </el-form-item>
          <el-form-item :label="$t('下次跟进时间')">
            <el-date-picker v-model="followFormTmp.nextTime" type="datetimerange" range-separator="-" :start-placeholder="$t('开始日期')" :end-placeholder="$t('结束日期')" value-format="yyyy-MM-dd HH:mm:ss" @change="handleQuery"> </el-date-picker>
          </el-form-item>
          <el-form-item :label="$t('关联跟进记录')" prop="parentNumber">
            <el-input v-model.trim="followForm.parentNumber" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>

          <el-form-item :label="$t('跟进类型')">
            <dict-selector clearable :type="DICT_TYPE.CUSTOMER_FOLLOWUP_TYPE" v-model="followForm.followType" @change="handleQuery"></dict-selector>
          </el-form-item>
          <el-form-item :label="$t('跟进方式')">
            <dict-selector clearable :type="DICT_TYPE.CUSTOMER_FOLLOWUP_METHOD" v-model="followForm.followMethod" @change="handleQuery"></dict-selector>
          </el-form-item>
          <el-form-item :label="$t('跟进结果')">
            <el-select clearable v-model="followForm.resultType" :placeholder="$t('请选择')" size="small" @change="handleQuery">
              <el-option v-for="dict in getDictDatas(DICT_TYPE.CUSTOMER_FOLLOWUP_RESULT_TYPE)" :key="dict.value" :label="isChinese ? dict.label : dict.labelEn" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('跟进状态')">
            <el-select clearable v-model="followForm.status" :placeholder="$t('请选择')" size="small" @change="handleQuery">
              <el-option v-for="dict in getDictDatas(DICT_TYPE.CUSTOMER_FOLLOWUP_STATUS)" :key="dict.value" :label="isChinese ? dict.label : dict.labelEn" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getCustomerFollowList">{{ $t("搜索") }} </el-button>
            <el-button type="primary" @click="reset">{{ $t("重置") }} </el-button>
            <el-button type="success" @click="handleAdd" v-hasPermi="['ecw:customer:follow-create']">{{ $t("新增") }} </el-button>
            <el-button type="warning" @click="handleExport" v-hasPermi="['ecw:customer:follow-export']">
              {{ $t("导出") }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="customerFollowList" style="width: 100%">
        <el-table-column prop="number" :label="$t('编号')" width="120">
          <template slot-scope="scope">
            <a href="javascript:void(0)" @click="handleCustomerFollowLink(scope.row)" class="link-type">{{ scope.row.number }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="followType" :label="$t('跟进类型')" :formatter="(row, column, cellValue) => getDictDataLabel(DICT_TYPE.CUSTOMER_FOLLOWUP_TYPE, cellValue)"></el-table-column>
        <el-table-column prop="offerNumber" :label="$t('报价单号')"> </el-table-column>
        <el-table-column prop="followTime" :label="$t('跟进时间')" :formatter="(row, column, cellValue) => parseTime(cellValue)"></el-table-column>
        <el-table-column prop="customerNumber" :label="$t('客户编号')"></el-table-column>
        <el-table-column prop="contactName" :label="$t('联系人')"></el-table-column>
        <el-table-column prop="contactPhone" :label="$t('联系方式')"></el-table-column>
        <el-table-column prop="followUserName" :label="$t('客户经理')"></el-table-column>
        <el-table-column prop="followMethod" :label="$t('跟进方式')" :formatter="(row, column, cellValue) => getDictDataLabel(DICT_TYPE.CUSTOMER_FOLLOWUP_METHOD, cellValue)"></el-table-column>
        <el-table-column prop="purpose" :label="$t('目的')"></el-table-column>
        <el-table-column prop="feedback" :label="$t('跟进情况')"></el-table-column>
        <el-table-column prop="resultType" :label="$t('跟进结果')" :formatter="(row, column, cellValue) => getDictDataLabel(DICT_TYPE.CUSTOMER_FOLLOWUP_RESULT_TYPE, cellValue)"></el-table-column>
        <el-table-column :label="$t('下次跟进时间')" align="center">
          <template slot-scope="scope">
            {{ parseTime(scope.row.nextTime) }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('关联跟进记录')" align="center" prop="parentNumber"></el-table-column>
        <el-table-column prop="nextPlan" :label="$t('下次计划')" align="center"></el-table-column>
        <el-table-column :label="$t('跟进状态')" align="center">
          <template slot-scope="scope">
            {{ getDictDataLabel(DICT_TYPE.CUSTOMER_FOLLOWUP_STATUS, scope.row.status) }}
          </template>
        </el-table-column>
        <el-table-column prop="creatorName" :label="$t('创建人')" align="center"></el-table-column>
        <el-table-column :label="$t('创建时间')" align="center">
          <template slot-scope="scope">
            {{ parseTime(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="updaterName" :label="$t('最后更新人')" align="center"></el-table-column>
        <el-table-column :label="$t('最后更新时间')" align="center">
          <template slot-scope="scope">
            {{ parseTime(scope.row.updateTime) }}
          </template>
        </el-table-column>
        <el-table-column width="150px" :label="$t('操作')" align="center" fixed="right" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" v-if="!scope.row.status" @click="handleCustomerFollow(scope.row)" v-hasPermi="['ecw:customer:follow-update']">{{ $t("编辑") }} </el-button>
            <el-button size="mini" type="text" icon="el-icon-collection" @click="handleCustomerFollow(scope.row, true)" v-has-permi="['ecw:customer:follow-add-plan']">{{ $t("增加计划") }} </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="customerFollowTotal" :page.sync="followForm.pageNo" :limit.sync="followForm.pageSize" @pagination="getCustomerFollowList" />
    </el-card>
    <customer-follow ref="customerFollow" @handleCustomerFollowAdd="handleCustomerFollowAdd" @refresh="handleQuery" v-if="customerFollowVisible" :customer-id="customerId" :offerId="offerId" />
  </div>
</template>

<script>
import { getCustomerFollowList, exportCustomerFollow } from "@/api/ecw/customerFollow"
import CustomerFollow from "@/views/ecw/customer/components/customerFollow"
import UserSelector from "@/components/UserSelector"
export default {
  name: "logListCommon",
  components: { UserSelector, CustomerFollow },
  props: ["customerId", "offerId"],
  data() {
    return {
      customerFollowVisible: false,
      customerFollowTotal: 0,
      customerFollowList: [],
      followForm: {
        pageNo: 1,
        pageSize: 10
      },
      followFormTmp: {
        nextTime: ["", ""]
      }
    }
  },
  created() {
    this.handleQuery()
  },
  computed: {
    isChinese() {
      return this.$i18n.locale === "zh_CN"
    },
    customerId_offerId() {
      return `${this.customerId}_${this.offerId}`
    }
  },
  watch: {
    customerId_offerId() {
      this.handleQuery()
    }
  },
  methods: {
    handleCustomerFollowAdd(row) {
      this.customerFollowVisible = false
      setTimeout(() => {
        this.customerFollowVisible = true
        this.$nextTick((_) => {
          this.$refs["customerFollow"].handleUpdate(row, true)
        })
      }, 100)
    },
    handleCustomerFollow(row, flag) {
      this.customerFollowVisible = true
      this.$nextTick((_) => {
        this.$refs["customerFollow"].handleUpdate(row, flag)
      })
    },
    handleAdd() {
      this.customerFollowVisible = true
      this.$nextTick(() => {
        this.$refs["customerFollow"].handleAdd()
      })
    },

    handleCustomerFollowLink(row) {
      this.customerFollowVisible = true
      this.$nextTick((_) => {
        this.$refs["customerFollow"].handleView(row)
      })
    },
    formatQuery() {
      let obj = {}
      obj.customerId = this.customerId || null
      obj.offerId = this.offerId || null
      obj.beginNextTime = this.followFormTmp.nextTime[0]
      obj.endNextTime = this.followFormTmp.nextTime[1]
      return obj
    },
    handleQuery() {
      this.followForm.pageNo = 1
      this.customerFollowTotal = 0
      this.customerFollowList = []
      this.getCustomerFollowList()
    },
    /** 跟进记录导出按钮操作 */
    handleExport() {
      // 执行导出
      this.$modal.confirm(this.$t("是否确认导出客户跟进记录数据项?")).then(() => {
        exportCustomerFollow({
          ...this.followForm,
          ...this.formatQuery(),
          pageNo: 1,
          pageSize: 10000000
        }).then((r) => {
          this.$message.success(this.$t("已加入导出队列，请稍后在下载日志中下载"))
        })
      })
    },
    getCustomerFollowList() {
      getCustomerFollowList({
        ...this.followForm,
        ...this.formatQuery()
      }).then((r) => {
        this.customerFollowList = r.data.list
        this.customerFollowTotal = r.data.total
      })
    },
    reset() {
      this.followFormTmp.nextTime = ["", ""]
      this.followForm = { pageNo: 1, pageSize: 10 }
      this.getCustomerFollowList()
    }
  }
}
</script>
