<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      ref="crud"
      v-model="form"
      :permission="permissionList"
      :before-open="beforeOpen"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template slot-scope="scope" slot="reStatusSearch">
        <el-select v-model="form.reStatus" placeholder="请选择诉求状态">
          <el-option
            v-for="item in statusData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </template>
      <template slot-scope="scope" slot="timeRangeSearch">
        <el-date-picker
          v-model="form.timeRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </template>
      <template slot-scope="scope" slot="reTypeSearch">
        <el-select v-model="form.reType" placeholder="请选择诉求类型">
          <el-option
            v-for="item in typeData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </template>
      <template slot-scope="scope" slot="windowsSearch">
        <el-select v-model="form.windows" placeholder="请选择处理窗口">
          <el-option
            v-for="item in winData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </template>
      <template slot-scope="scope" slot="nameSearch">
        <el-input v-model="form.name" placeholder="请输入代表姓名"></el-input>
      </template>
      <template slot-scope="{ row }" slot="menu">
        <!-- <el-button
          size="small"
          @click="handleRegis(row)"
          >再次调解</el-button
        > -->
         <el-button
          size="small"
          @click="handleRecon(row)"
          >诉求调解</el-button
        >
        <el-button
          size="small"
          @click="handleList(row)"
          >调解记录</el-button
        >
      </template>
      <template slot-scope="scope" slot="status">
        <div v-show="scope.row.status == 0" style="color: #529ce5">待处理</div>
        <div v-show="scope.row.status == 1" style="color: #91b337">正在处理</div>
        <div v-show="scope.row.status == 2" style="color: #e99f42">达成协议</div>
        <div v-show="scope.row.status == 3" style="color: #101010">调解成功</div>
      </template>
      <template slot-scope="scope" slot="endTime">
        <div>{{scope.row.endTime !== '' ? scope.row.endTime : '---/-/---'}}</div>
      </template>
      <template slot-scope="scope" slot="menuLeft">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="small"
          @click="addRegister"
          >诉求登记</el-button
        >
      </template>
    </avue-crud>
    <el-dialog
        title="调解记录"
        :visible.sync="dialogVisible"
        width="30%"
        :modal-append-to-body="true"
        :append-to-body="true"
        custom-class="resi_list"
    >
    <div class="list">
        <div class="list_box" v-for="item in listData" :key="item.time" @click="listView(item)">
            <div  class="time_txt">{{item.mediateTime}}<span style="margin-left:20px">调解记录</span></div>
        </div>
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
    </el-dialog>
  </basic-container>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
    active:'1',
      form: {},
      dialogVisible:false,
      statusData: [
        { label: "待处理", value: "0" },
        { label: "正在处理", value: "1" },
        { label: "达成协议", value: "2" },
        { label: "调解成功", value: "3" },
      ],
      listData:[
        {
          id: "122555646684684",
          mediateTime: "2012-05-15 12:30",
          talkingAdvice: "接谈意见..........."
        },
        {
          id: "122555646684684",
          mediateTime: "2022-05-15 12:30",
          talkingAdvice: "接谈意见..........."
        }  
      ],
      typeData:[
        {label:'邻里纠纷',value:0},
        {label:'婚姻纠纷',value:1},
        {label:'合同纠纷',value:2},
      ],
      winData:[
        {label:'窗口一',value:0},
        {label:'窗口二',value:1},
        {label:'窗口三',value:2},
      ],
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
        searchShowBtn: false,
        refreshBtn: false,
        columnBtn: false,
        height: "auto",
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 4,
        searchSpan: 6,
        border: false,
        index: true,
        addBtn: false,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        index: true,
        column: [
          {
            label: "诉求状态",
            prop: "reStatus",
            search: true,
            searchslot: true,
            hide: true,
            // searchSpan: 4,
          },
          {
            label: "诉求类型",
            prop: "reType",
            search: true,
            searchslot: true,
            hide: true,
            // searchSpan: 4,
          },
          {
            label: "处理窗口",
            prop: "windows",
            search: true,
            searchslot: true,
            hide: true,
            // searchSpan: 4,
          },
          {
            label: "代表姓名",
            prop: "name",
            search: true,
            searchslot: true,
            hide: true,
            // searchSpan: 4,
          },
          {
            label: "登记时间",
            prop: "timeRange",
            search: true,
            searchslot: true,
            hide: true,
          },
          {
            label: "代表姓名",
            prop: "peoName",
            align: "center",
            overHidden:true,
            width:70,
          },
          {
            label: "身份证号码",
            overHidden:true,
            width:150,
            prop: "ic_card",
            align: "center",
          },
          {
            label: "诉求类型",
            overHidden:true,
            prop: "type",
            align: "center",
          },
          {
            label: "登记时间",
            overHidden:true,
            prop: "time",
            align: "center",
          },
          {
            label: "办结时间",
            slot:true,
            prop: "endTime",
            align: "center",
          },
          {
            label: "反应主要问题",
            overHidden:true,
            prop: "question",
            align: "center",
          },
          {
            label: "状态",
            prop: "status",
            slot: true,
            align: "center",
          },
        ],
      },
      data: [],
      time:'',
      date:'',
    };
  },
   computed: {
    ...mapGetters(["permission"]),
  },
  created() {
    this.getTime()
    console.log(this.permission)
  },
  methods: {
    handleList(){
        this.dialogVisible = true
    },
    handleRegis(){
      this.$router.push({ path: "/register/add",query:{type:'edit'} });
    },
    handleRecon(){
      this.$router.push({ path: "/register/recon",query:{type:'recon',time:this.date + ' ' + this.time} });
    },
    listView(row){
      this.$router.push({ path: "/register/recon",query:{type:'view',time:row.mediateTime,id:row.id} });
    },
    searchReset() {
      this.query = {};
      this.form = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      console.log(this.form);
      this.query = this.form;
      this.page.currentPage = 1;
      this.onLoad(this.page, this.form);
      done();
    },
    fn(str) {
      let num = null;
      str >= 10 ? (num = str) : (num = "0" + str);
      return num;
    },
    getTime() {
      //获取当前时间
        var date = new Date();
        var year = date.getFullYear(); //当前年份
        var month = date.getMonth(); //当前月份
        var data = date.getDate(); //天
        var hours = date.getHours(); //小时
        var minute = date.getMinutes(); //分
        var second = date.getSeconds(); //秒
        this.day = date.getDay(); //获取当前星期几
        // this.getWeek(this.day);
        this.time = this.fn(hours) + ":" + this.fn(minute);
        this.date = year + "/" + (month + 1) + "/" + data;
    },
    onLoad() {
      this.loading = false;
      this.data = [
        {   peoName: "王二狗", ic_card: "370212188501******", type:'合同纠纷',
            time:'2020-12-01 09:23',endTime:"2023-05-22 09:12",
            question:'此处反应问题问合同纠纷类问题，此处反应问题问合同纠纷类问题',status: 0 
        },
        {   peoName: "张三，李四", ic_card: "371212199501******", type:'合同纠纷',
            time:'2020-12-01 09:23',endTime:"",
            question:'此处反应问题问合同纠纷类问题',status: 1 
        },
        {   peoName: "王五", ic_card: "371212199501******,371212199501******", type:'合同纠纷',
            time:'2020-12-01 09:23',endTime:"2023-05-22 09:12",
            question:'此处反应问题问合同纠纷类问题',status: 2 
        },
        {   peoName: "王五", ic_card: "371212199501******,371212199501******", type:'合同纠纷',
            time:'2020-12-01 09:23',endTime:"2023-05-22 09:12",
            question:'此处反应问题问合同纠纷类问题',status: 3 
        },
      ];
      this.page.total = this.data.length;
    },
    addRegister() {
      this.$router.push({ path: "/register/add",query:{type:'add'} });
    },
    handleEdit() {
      this.$router.push({ path: "/request/add" });
    },
    handleDis(row) {
      this.$confirm(`确认禁用当前处理窗口吗？`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {});
    },
    handleDelete(row) {
      this.$confirm(`确认删除当前处理窗口吗？`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {});
    },
  },
};
</script>

<style lang="scss">
.resi_list{
    .list{
        width: 80%;
        max-height: 246px;
        overflow-y: auto;

        .list_box{
            width: 100%;
            height: 41px;
            font-size: 20px;
            display: flex;
            align-items: center;

            & :hover{
                cursor: pointer;
                // .time_txt{
                    color: #4095e5;

                // }
            }
        }
    }
}
</style>
<style scoped>

</style>
