<template>
 <div style="padding: 20px">
   <el-card :title="'客户操作日志'">
     <el-descriptions border :column="3">
       <el-descriptions-item label="订单编号"><el-input v-model="queryForm.orderNo"></el-input></el-descriptions-item>
       <el-descriptions-item label="操作人"><el-input v-model="queryForm.operator"></el-input></el-descriptions-item>
       <el-descriptions-item label="老客户经理"><el-input v-model="queryForm.oldCustomerService"></el-input></el-descriptions-item>
       <el-descriptions-item label="客户编号"><el-input v-model="queryForm.number"></el-input></el-descriptions-item>
       <el-descriptions-item label="新客户经理"><el-input v-model="queryForm.newCustomerService"></el-input></el-descriptions-item>
       <el-descriptions-item label="客户名称"><el-input v-model="queryForm.name"></el-input></el-descriptions-item>
       <el-descriptions-item label="操作类型">
         <dict-selector  :type="DICT_TYPE.CUSTOMER_OPERATE_TYPE" v-model="queryForm.operateType">

         </dict-selector>
       </el-descriptions-item>
       <el-descriptions-item label="新的预计进入公海的时间">
           <el-date-picker
          v-model="newEstimateEnterOpenSeaTimeArr"
           type="datetimerange"
           value-format="yyyy-MM-dd HH:mm:ss"
           range-separator="至"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
           align="right">
         </el-date-picker>
       </el-descriptions-item>
       <el-descriptions-item label="老的预计进入公海的时间">
         <el-date-picker
           v-model="newEstimateEnterOpenSeaTimeArr"
           type="datetimerange"
           value-format="yyyy-MM-dd HH:mm:ss"
           range-separator="至"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
           align="right">
         </el-date-picker>
       </el-descriptions-item>
       <el-descriptions-item>
         <el-button @click="getList">搜索</el-button>
         <el-button @click="initialize();getList()">重置</el-button>
       </el-descriptions-item>
     </el-descriptions>
   </el-card>
   <el-table style="margin-top: 30px" :data="list">
     <el-table-column label="订单编号" prop="orderNo"></el-table-column>
     <el-table-column label="客户编号" prop="number"></el-table-column>
     <el-table-column label="客户名称" prop="name"></el-table-column>
     <el-table-column label="新客户经理" prop="newCustomerService">
       <template v-slot="{row}">
         {{row.newCustomerService ? row.newCustomerService : '/'}}
       </template>
     </el-table-column>
     <el-table-column label="老客户经理" prop="oldCustomerService">
       <template v-slot="{row}">
         {{row.oldCustomerService ? row.oldCustomerService : '/'}}
       </template>
     </el-table-column>
     <el-table-column label="操作类型">
       <template v-slot="{row}">
         <dict-tag :type="DICT_TYPE.CUSTOMER_OPERATE_TYPE" :value="row.operateType"></dict-tag>
       </template>
     </el-table-column>
     <el-table-column label="操作人" prop="operator">
        <template v-slot="{row}">
          {{operatorFn(row.operator)}}
        </template>
     </el-table-column>
     <el-table-column label="新的预计入公海时间">
       <template v-slot="{row}">
         {{parseTime(row.newEstimateEnterOpenSeaTime)}}
       </template>
     </el-table-column>
     <el-table-column label="老的预计入公海时间" >
       <template v-slot="{row}">
         {{parseTime(row.oldEstimateEnterOpenSeaTime)}}
       </template>
     </el-table-column>
     <el-table-column label="操作">
       <template v-slot="{row}">
         <el-button type="text" @click="getCustomerLog(row.id)">
           详情
         </el-button>
       </template>
     </el-table-column>
   </el-table>
   <pagination v-show="total > 0" :total="total" :page.sync="queryForm.page" :limit.sync="queryForm.rows"
               @pagination="getList"/>
   <el-dialog title="客户日志" :visible.sync="show">
     <el-form>
       <el-form-item label="订单编号:">
         {{dataLog.dataLog ? dataLog.dataLog :'/'}}
       </el-form-item>
       <el-form-item label="客户编号:">
         {{dataLog.number}}
       </el-form-item>
       <el-form-item label="客户名称:">
         {{dataLog.name}}
       </el-form-item>
       <el-form-item label="新客户经理:">
         {{dataLog.newEstimateEnterOpenSeaTime ? dataLog.newEstimateEnterOpenSeaTime : '/'}}
       </el-form-item>
       <el-form-item label="老客户经理:">
         {{dataLog.oldEstimateEnterOpenSeaTime ? dataLog.oldEstimateEnterOpenSeaTime : '/'}}
       </el-form-item>
       <el-form-item label="操作类型:">
         <dict-tag :type="DICT_TYPE.CUSTOMER_OPERATE_TYPE" :value="dataLog.operateType"></dict-tag>
       </el-form-item>
       <el-form-item label="操作人:">
         {{operatorFn(dataLog.operator)}}
       </el-form-item>
       <el-form-item label="新预计进入公海时间:">
         {{parseTime(dataLog.newEstimateEnterOpenSeaTime)}}
       </el-form-item>
       <el-form-item label="老的预计进入公海时间:">
         {{parseTime(dataLog.oldEstimateEnterOpenSeaTime)}}
       </el-form-item>
       <el-form-item label="备注:">
         {{dataLog.remark}}
       </el-form-item>
       <el-form-item label="更新json:">
         {{dataLog.updateBody}}
       </el-form-item>
     </el-form>
   </el-dialog>
 </div>
</template>

<script>
import {getCustomerOperatelog, getCustomerOperatelogPage} from "@/api/ecw/customer";
import {parseTime} from "../../../utils/ruoyi";
import Template from "@/views/cms/template/index.vue";
import {DICT_TYPE} from "@/utils/dict";
import {listAllSimpl} from "@/api/system/user";
export default {
  name: "customerLog",
  computed: {
    DICT_TYPE() {
      return DICT_TYPE
    },
    operatorFn(){
      return (val)=>{
        return this.allSimplList.find(item => item.id == val)?.nickname
      }
    }
  },
  components: {Template},
  created() {
     this.initialize()
    this.getList()
    listAllSimpl().then(r => {
      this.allSimplList = r.data
    })
    },
  data(){
    return {
      queryForm:{},
      newEstimateEnterOpenSeaTimeArr:[],
      oldEstimateEnterOpenSeaTimeArr:[],
      list:[],
      total:0,
      show:false,
      allSimplList:[],
      dataLog:{}
    }
  },
  methods:{
    parseTime,
    initialize(){
      this.queryForm = {
        page:1,
        rows:10,
        name:null,
        oldCustomerService:null,
        newCustomerService:null,
        operateType:null,

        operator:null,
        orderNo:null,
        newEstimateEnterOpenSeaTime:null,
        beginNewEstimateEnterOpenSeaTime:null,
        beginOldEstimateEnterOpenSeaTime:null,
        endNewEstimateEnterOpenSeaTime:null,
        endOldEstimateEnterOpenSeaTime:null,
      }
    },
    getList(){
      this.queryForm.beginNewEstimateEnterOpenSeaTime = this.newEstimateEnterOpenSeaTimeArr[0] || ''
      this.queryForm.endNewEstimateEnterOpenSeaTime = this.newEstimateEnterOpenSeaTimeArr[1] || ''
      this.beginOldEstimateEnterOpenSeaTime = this.oldEstimateEnterOpenSeaTimeArr[0] || ''
      this.endOldEstimateEnterOpenSeaTime = this.oldEstimateEnterOpenSeaTimeArr[1] || ''
      getCustomerOperatelogPage(this.queryForm).then(r => {
         this.list = r.data.list;
         this.total = r.data.total;
      })
    },
    getCustomerLog(val){
      getCustomerOperatelog({id:val}).then(r =>{
       this.dataLog = r.data
        this.show = true;
      })
    }
  }
}
</script>

<style scoped>

</style>
