<!-- 续约 -->
<template>
  <div class="context">
    <div style="text-align: right;margin-bottom: 20px;">
      <el-button type="primary" @click="newresume = !newresume">
        新增续约客户
      </el-button> 
    </div>
    <div>
      <el-table
        :data="tableData"
        border
        size='small'
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        style="width: 100%;">
        <el-table-column
        type="index"
        label="序号"
        width="50">
        </el-table-column>
        <el-table-column
        prop="name"
        label="客户名称"
        width="">
        </el-table-column>
        <el-table-column
        prop="type"
        label="客户类型"
        width="100">
        </el-table-column>
        <el-table-column
        prop="qianyue"
        label="签约时间"
        width="130">
        </el-table-column>
        <el-table-column
        prop="start_time"
        label="开始时间"
        width="130">
        </el-table-column>
        <el-table-column
        prop="end_time"
        label="结束时间"
        width="130">
        </el-table-column>
        <el-table-column
        prop="caozuo"
        label="签约人"
        width="80">
        </el-table-column>
        <el-table-column
        prop="examine"
        label="审核人"
        width="80">
        </el-table-column>
        <el-table-column
        prop="address"
        label="操作"
        width="">
        <template slot-scope="scope">
          <el-button type="primary" @click="cahkan_click(scope.row)">查看</el-button>
          <span v-if="scope.row.examine==''" style="display: inline-block;margin-left:10px ;">
            <el-button type="primary" @click="editor_click(scope.row)">修改</el-button>
            <el-button type="danger" @click="delete_open(scope.row)">删除</el-button>
          </span>
        </template>
        </el-table-column>
    </el-table>
    </div>
    <!-- 弹窗 -->
    <div>
      <!-- 新增 -->
      <el-dialog
        title="新增续约信息"
        :visible.sync="newresume"
        :modal-append-to-body="false"
        width="60%"
        >
        <div style="height: 50vh;overflow: overlay;">
          <div class="xinxi"  style="">
            <div style="flex: 1;">
              <span>客户名称：</span>
              <el-input v-model="resumeobj.name" placeholder="请输入内容" style="width: 60%;"></el-input>
            </div>
            <div style="flex: 1;">
              <span>客户类型：</span>
              <el-select v-model="resumeobj.type" placeholder="请选择" style="width: 60%;">
                <el-option
                  v-for="item in custom_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="xinxi"  style="">
            <div style="flex: 1;">
              <span>签约时间：</span>
              <el-date-picker
                v-model="resumeobj.date"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </div>
            <div style="flex: 1;">
                <span>签约人员：</span>
                <el-input v-model="resumeobj.personnel" placeholder="请输入内容" style="width: 60%;"></el-input>
              </div>
          </div>

          <div class="xinxi"  style="">
            <div style="flex: 1;">
                <span>开始时间：</span>
                <el-date-picker
                  v-model="resumeobj.start_time"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
            </div>
            <div style="flex: 1;">
              <span>结束时间：</span>
              <el-date-picker
                v-model="resumeobj.end_time"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </div>
          </div>
          <div class="xinxi"  style="">
            <div style="flex: 1;">
              <span style="position: relative;bottom: 20px;left: 0;">
                  备注：
              </span>
              <el-input type="textarea" :row="2" v-model="resumeobj.remark" placeholder="请输入内容" style="width: 80%;"></el-input>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="newresume = false">取 消</el-button>
          <el-button type="primary" @click="add_click">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改 -->
      <el-dialog
        title="编辑联系人"
        :visible.sync="connection"
        :modal-append-to-body="false"
        width="60%"
        >
        <div style="height: 50vh;overflow: overlay;">
          <div class="xinxi"  style="">
            <div style="flex: 1;">
              <span>客户名称：</span>
              <el-input v-model="resumeditor.name" placeholder="请输入内容" style="width: 60%;"></el-input>
            </div>
            <div style="flex: 1;">
              <span>客户类型：</span>
              <el-select v-model="resumeditor.type" placeholder="请选择" style="width: 60%;">
                <el-option
                  v-for="item in custom_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="xinxi"  style="">
            <div style="flex: 1;">
              <span>签约时间：</span>
              <el-date-picker
                v-model="resumeditor.date"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </div>
            <div style="flex: 1;">
                <span>签约人员：</span>
                <el-input v-model="resumeditor.personnel" placeholder="请输入内容" style="width: 60%;"></el-input>
              </div>
          </div>

          <div class="xinxi"  style="">
            <div style="flex: 1;">
                <span>开始时间：</span>
                <el-date-picker
                  v-model="resumeditor.start_time"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
            </div>
            <div style="flex: 1;">
              <span>结束时间：</span>
              <el-date-picker
                v-model="resumeditor.end_time"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </div>
          </div>
          <div class="xinxi"  style="">
            <div style="flex: 1;">
              <span style="position: relative;bottom: 20px;left: 0;">
                  备注：
              </span>
              <el-input type="textarea" :row="2" v-model="resumeditor.remark" placeholder="请输入内容" style="width: 80%;"></el-input>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="connection = false">取 消</el-button>
          <el-button type="primary" @click="verify_click">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 查看 -->
      <el-dialog
        title="查看联系人"
        :visible.sync="view_eldialog"
        :modal-append-to-body="false"
        width="60%"
        >
        <div style="height: 50vh;overflow: overlay;">
          <div class="xinxi"  style="">
            <div style="flex: 1;">
              <span>客户名称：</span>
              <el-input v-model="resumeditor.name" placeholder="请输入内容" style="width: 60%;"></el-input>
            </div>
            <div style="flex: 1;">
              <span>客户类型：</span>
              <el-select v-model="resumeditor.type" placeholder="请选择" style="width: 60%;">
                <el-option
                  v-for="item in custom_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="xinxi"  style="">
            <div style="flex: 1;">
              <span>签约时间：</span>
              <el-date-picker
                v-model="resumeditor.date"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </div>
            <div style="flex: 1;">
                <span>签约人员：</span>
                <el-input v-model="resumeditor.personnel" placeholder="请输入内容" style="width: 60%;"></el-input>
              </div>
          </div>

          <div class="xinxi"  style="">
            <div style="flex: 1;">
                <span>开始时间：</span>
                <el-date-picker
                  v-model="resumeditor.start_time"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
            </div>
            <div style="flex: 1;">
              <span>结束时间：</span>
              <el-date-picker
                v-model="resumeditor.end_time"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </div>
          </div>
          <div class="xinxi"  style="">
            <div style="flex: 1;">
              <span style="position: relative;bottom: 20px;left: 0;">
                  备注：
              </span>
              <el-input type="textarea" :row="2" v-model="resumeditor.remark" placeholder="请输入内容" style="width: 80%;"></el-input>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="view_eldialog = false">取 消</el-button>
          <el-button type="primary" @click="view_eldialog = false">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 删除 -->
      <el-dialog
        title="删除"
        :visible.sync="dele_dialogVisible"
        width="30%">
        <span>是否确定删除该数据</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dele_dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="delete_click">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { uParseTime } from "../../../utils/tools";
import {getrenewalcreate,getrenewallist,getrenewaledit,getrenewalget,getrenewaldelete} from '../../../api/index'
  export default{
    props:{
      Message:Object
    },
    data(){
      return{
        tableData: [],
        shenhe:1,
        newresume:false,
        connection:false,
        input:'',
        textarea:'',
        value1:'',

        dele_id:'',
        view_eldialog:false,
        dele_dialogVisible:false,
        custom_options:[{value:1,label:'标准版'},{value:2,label:'尊享版'},{value:3,label:'专业版'}],
        resumeobj:{
          name:'',
          type:'',
          date:this.getTime(new Date()),
          personnel:'',
          start_time: this.getTime(new Date()),
          end_time:this.getTime(new Date()),
          remark:'',
        },
        resumeditor:{
          name:'',
          type:'',
          date:this.getTime(new Date()),
          personnel:'',
          start_time: this.getTime(new Date()),
          end_time:this.getTime(new Date()),
          remark:'',
        }

      }
    },
    created(){
      this.resumeobj.name = this.Message.name
      this.getlist()
    },
    methods:{
      // 查看
      cahkan_click(row){
        this.view_eldialog = true
        getrenewalget(row.id).then(res =>{
          console.log('row',res);
          const response = res.data.charge_renewal
          this.resumeditor = {
            name:row.name,
            type:response.type,
            date:response.sign_time,
            personnel:response.signing_personal,
            start_time: response.start_time,
            end_time:response.end_time,
            remark:response.remark,
          }
        })
      },
      // 新增确认
      add_click(){
        const data = {
          custom_id:this.Message.id,
          type:this.resumeobj.type,
          start_time:this.resumeobj.start_time,
          end_time:this.resumeobj.end_time,
          signing_personal:this.resumeobj.personnel,
          sign_time:this.resumeobj.date,
          remark:this.resumeobj.remark,
        }
        getrenewalcreate(data).then(res =>{
          console.log('[getrenewalcreate]',res);
          // this.$message({message:'添加成功',type:'success'})
          this.getlist()
        })
        this.newresume = false
      },
      // 修改弹窗
      editor_click(row){
        this.connection = true
        this.editor_id = row.id
        
        getrenewalget(row.id).then(res =>{
          // console.log('row',res);
          const response = res.data.charge_renewal
          this.resumeditor = {
            name:row.name,
            type:response.type,
            date:response.sign_time,
            personnel:response.signing_personal,
            start_time: response.start_time,
            end_time:response.end_time,
            remark:response.remark,
          }
        })
      },
      // 修改确认
      verify_click(){
        const editor = this.resumeditor
        const data={
          id:this.editor_id,
          custom_id:this.Message.id,
          type:editor.type,
          start_time:editor.start_time,
          end_time:editor.end_time,
          signing_personal:editor.personnel,
          sign_time:editor.date,
          remark:editor.remark,
        }
        console.log('11111',typeof(data.custom_id));
        getrenewaledit(data).then(res =>{
          console.log('data',res);
          this.getlist()
        })
        this.connection = false
      },
      // 删除弹窗
      delete_open(row){
        this.dele_id = row.id
        this.dele_dialogVisible = true
      },
      // 删除确认
      delete_click(){
        getrenewaldelete(this.dele_id).then(res =>{
          // this.$message({message:res.data.msg,type:'success'})
          this.getlist()
        })
        this.dele_dialogVisible = false
      },
      // 列表数据
      getlist(){
        getrenewallist().then(res =>{
          // console.log('getrenewallist',res);
          const list = res.data.list
          const table = []
          list.forEach((item,index) => {
            if(item.is_check==1){
              const arr={
                id:item.id,
                index:index+1,
                name:this.Message.name,
                type:this.getcustom(item.type),
                qianyue:item.sign_time,
                start_time:item.start_time,
                end_time:item.end_time,
                caozuo:item.signing_personal,
                examine:item.check_person
              }
              table.unshift(arr)
            }
          });
          this.tableData = table
        })
      },
       // 客户类型
      getcustom(val){
        const options = this.custom_options
        for(let i in options){
          if(val == options[i].value){
            return options[i].label
          }
        }
      },
      // 转换时间
      getTime(val) {
        if(val < 0){
          return ""
        }
        if(val == ""){
          return ""
        }else {
          return uParseTime(val, '{y}-{m}-{d}')
        }
      },
    }
  }
</script>
<style lang="scss" scoped>
  .context{
    padding: 20px 0;
    .xinxi{
      display: flex;
      margin-bottom: 15px;
    }
  }

</style>