<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="客户名称" prop="customerName">
        <el-input
          v-model="queryParams.customerName"
          placeholder="请输入客户名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="手机号" prop="customerPhone">
        <el-input
          v-model="queryParams.customerPhone"
          placeholder="请输入手机号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="车牌号" prop="customerName">
        <el-input
          v-model="queryParams.carNum"
          placeholder="请输入车牌号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="角色" prop="roleCode">
        <el-select v-model="queryParams.roleCode" placeholder="请选择角色">
          <el-option
            v-for="dict in dict.type.jcz_role"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="customerInfoList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="客户名称" align="center" prop="customerName" />
      <el-table-column label="客户手机号" align="center" prop="customerPhone" />
      <el-table-column label="角色"  align="center" prop="roleName" />
      <el-table-column label="性别" align="center" prop="sex">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/>
        </template>
      </el-table-column>
      <el-table-column label="年龄" align="center" prop="userAge" />
      <el-table-column label="车辆号码----------保险到期时间-------年检到期时间 " width="355" align="center" prop="userCarList" >
        <template slot-scope="scope">
<!--          <div style="display: flex">-->
<!--            <div>{{scope.row.userCarList.carNo}}</div>-->
<!--            <div>{{scope.row.userCarList.insuranceExpiryDate}}</div>-->
<!--            <div>{{scope.row.userCarList.nextInspectionDate}}</div>-->
<!--          </div>-->

          <el-table v-loading="loading" :show-header="tou" :data="scope.row.userCarList" >

            <el-table-column  align="center" prop="carNo" />
            <el-table-column  align="center" prop="insuranceExpiryDate" />
            <el-table-column  align="center" prop="nextInspectionDate" />

          </el-table>
        </template>
      </el-table-column>


      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改客户信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="850px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户名称" prop="customerName">
              <el-input v-model="form.customerName" placeholder="请输入客户名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户手机号" prop="customerPhone">
              <el-input v-model="form.customerPhone" placeholder="请输入客户手机号" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-select v-model="form.sex" placeholder="请选择性别">
                <el-option
                  v-for="dict in dict.type.sys_user_sex"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年龄" prop="userAge">
              <el-input v-model="form.userAge" placeholder="请输入年龄" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="角色" prop="sex">
              <el-select v-model="form.roleCode" placeholder="请选择角色">
                <el-option
                  v-for="dict in dict.type.jcz_role"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>



<!--        新增上传车辆信息-->
        <div  v-for="(item,index) in form.userCarList" :key="index" style="width: 100%; ">
          <el-collapse  v-model="activeName" accordion>
            <el-collapse-item title="车辆信息" accordion>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="品牌型号" prop="categoryName">
                    <el-input v-model="item.carModel" placeholder="请输入品牌型号" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">

                  <el-form-item label="车辆号码" prop="categoryName">
                    <el-input v-model="item.carNo" placeholder="请输入车辆号码" />
                  </el-form-item>

                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="保养里程(KM)" prop="categoryName">
                    <el-input v-model="item.maintenanceMileage" placeholder="请输入车辆里程" />
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="下次保养(KM)" prop="categoryName">
                    <el-input v-model="item.nextMaintenanceMileage" placeholder="请输入下次保养里程" />
                  </el-form-item>
                </el-col>

              </el-row>
              <el-row >

                <el-col :span="12" justify="center">
                  <el-form-item label="保养日期" prop="maintenanceDate">
                    <el-date-picker
                      v-model="item.maintenanceDate"
                      type="date"
                      placeholder="保养日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12" justify="center">
                  <el-form-item label="下次保养日期" prop="nextMaintenanceDate">
                    <el-date-picker
                      v-model="item.nextMaintenanceDate"
                      type="date"
                      placeholder="下次保养日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>

              </el-row>



              <el-row>
                <el-col :span="12">
                  <el-form-item label="年检日期" prop="inspectionDate">
                    <el-date-picker
                      v-model="item.inspectionDate"
                      type="date"
                      placeholder="年检日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="下次年检日期" prop="nextInspectionDate">
                    <el-date-picker
                      v-model="item.nextInspectionDate"
                      type="date"
                      placeholder="下次年检日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="保险日期" prop="insuranceDate">
                    <el-date-picker
                      v-model="item.insuranceDate"
                      type="date"
                      placeholder="保险日期">
                    </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" >
                    <el-form-item label="保险到期日期" prop="insuranceExpiryDate">
                    <el-date-picker
                      v-model="item.insuranceExpiryDate"
                      type="date"
                      placeholder="保险到期日期">
                    </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>






              <div style="width: 100%; display: flex; align-items: center;justify-content: flex-end ">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="deletecomm(index)"

                >删除</el-button>
              </div>

            </el-collapse-item>
          </el-collapse>




        </div>
        <div style="width: 100%; margin: 20px auto; display: flex;align-items: center; justify-content: flex-end ">
          <el-button type="primary" icon="el-icon-plus" @click="addCommodity()" >新增车辆信息</el-button>
        </div>


    </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { listCustomerInfo, getCustomerInfo, delCustomerInfo, addCustomerInfo, updateCustomerInfo } from "./api/customer";
  import request from "@/utils/request";
  import DictTag from '@/components/DictTagOld/index.vue'

  export default {
    name: "CustomerInfo",
    components:{DictTag},
    dicts: ['sys_user_sex','jcz_role'],
    data() {
      return {
        tou:false,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 客户信息表格数据
        customerInfoList: [],
        // userCarList:[],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNo: 1,
          pageSize: 10,
          customerName: null,
          customerPhone: null,
          carNum:null,
        },
        // 表单参数
        form: {
            userCarList:[{
            carModel:'',
            carNo:'',
            maintenanceDate:'',
            maintenanceMileage:'',
            inspectionDate:'',
            insuranceDate:'',
            nextMaintenanceDate:'',
            nextMaintenanceMileage:'',
            nextInspectionDate:'',
            insuranceExpiryDate:'',
          }]
        },
        carModel:'',
        carNo:'',
        maintenanceDate:'',
        maintenanceMileage:'',
        inspectionDate:'',
        insuranceDate:'',
        nextMaintenanceDate:'',
        nextMaintenanceMileage:'',
        nextInspectionDate:'',
        insuranceExpiryDate:'',
        // 表单校验
        rules: {
        }
      };
    },
    created() {
      this.dict = {type:{}}
      for (let i = 0; i < this.$options.dicts.length; i++) {
        request({
          url: '/rescue/dict/data/type/'+this.$options.dicts[i],
          method: 'get'
        }).then(res=>{
          this.$set(this.dict.type,this.$options.dicts[i],res.data)
        })
      }
      this.getList();
    },
    methods: {
      addCommodity(){
        let data = {
          carModel:this.carModel,
          carNo:this.carNo,
          maintenanceDate:this.maintenanceDate,
          maintenanceMileage:this.maintenanceMileage,
          inspectionDate:this.inspectionDate,
          insuranceDate:this.insuranceDate,
          nextMaintenanceDate:this.nextMaintenanceDate,
          nextMaintenanceMileage:this.nextMaintenanceMileage,
          nextInspectionDate:this.nextInspectionDate,
          insuranceExpiryDate:this.insuranceExpiryDate,
        }
        this.form.userCarList.push(data)
      },
      deletecomm(index){
        this.form.userCarList.splice(index, 1);
      },
      /** 查询客户信息列表 */
      getList() {
        this.loading = true;
        listCustomerInfo(this.queryParams).then(response => {
          this.customerInfoList = response.data.records;
          // this.userCarList = response.rows.userCarList
          this.total = response.data.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          partnerId: null,
          customerName: null,
          customerPhone: null,
          userId: null,
          sex: null,
          userAge: null,
          deptId: null,
          createTime: null,
          createBy: null,
          updateTime: null,
          updateBy: null,
          userCarList:[{
            carModel:'',
            carNo:'',
            maintenanceDate:'',
            maintenanceMileage:'',
            inspectionDate:'',
            insuranceDate:'',
            nextMaintenanceDate:'',
            nextMaintenanceMileage:'',
            nextInspectionDate:'',
            insuranceExpiryDate:'',
          }]
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNo = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加客户信息";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        const id = row.id || this.ids
        this.form = row;
        this.open = true;
        this.title = "修改客户信息";
        // this.reset();


      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateCustomerInfo(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addCustomerInfo(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认删除客户信息编号为"' + ids + '"的数据项？').then(function() {
          return delCustomerInfo(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('customerInfo/customerInfo/export', {
          ...this.queryParams
        }, `customerInfo_${new Date().getTime()}.xlsx`)
      }
    }
  };
</script>
