<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['cs:csRenewalRecord:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['cs:csRenewalRecord:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['cs:csRenewalRecord:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['cs:csRenewalRecord:export']">导出</el-button>
      </el-col>
      <!--<el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-download" size="mini" @click="handleExportTemplate"
          v-hasPermi="['cs:csRenewalRecord:export']">导出模板</el-button>
      </el-col>-->
      <el-col :span="2">
        <el-button plain size="small" @click="handleSearch">高级搜索</el-button>
      </el-col>
      <el-col :span="6">
        <span style="padding-right: 10px;">表格设置</span>
        <el-select v-model="tableHeaderList" multiple collapse-tags placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <div v-if="showSearch" ref="showSearch" class="searchForm">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="关键词">
          <el-input placeholder="请输入关键词" v-model="queryParams.keyword" />
        </el-form-item>
        <el-form-item label="工单处理日期" prop="tackleTime">
          <el-date-picker clearable v-model="queryParams.tackleTime" type="date" value-format="yyyy-MM-dd"
            placeholder="请选择工单处理日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="工单账号" prop="orderAccount">
          <el-input v-model="queryParams.orderAccount" placeholder="请输入工单账号" clearable
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="用户姓名" prop="userName">
          <el-input v-model="queryParams.userName" placeholder="请输入用户姓名" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="用户单位" prop="userCompanyId">
          <el-input v-model="queryParams.userCompanyId" placeholder="请输入用户单位" clearable
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="AC账号" prop="userAccount">
          <el-input v-model="queryParams.userAccount" placeholder="请输入AC账号" clearable
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="联系方式" prop="concatPhone">
          <el-input v-model="queryParams.concatPhone" placeholder="请输入联系方式" clearable
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="提交时间" prop="dateRange">
          <el-date-picker clearable v-model="queryParams.dateRange" type="daterange" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </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>
    </div>
    <el-table v-loading="loading" :data="csRenewalRecordList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="序号" align="center" prop="sort">
        <template slot-scope="scope">
          {{ ((queryParams.pageNum - 1) * queryParams.pageSize) + (scope.$index + 1) }}
        </template>
      </el-table-column>
      <el-table-column label="工单处理日期" align="center" prop="tackleTime" width="180"
      v-if="tableHeaderList.indexOf('tackleTime') != -1" >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.tackleTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="工单账号" align="center" prop="orderAccount" v-if="tableHeaderList.indexOf('orderAccount') != -1"  />
      <el-table-column label="用户姓名" align="center" prop="realName" v-if="tableHeaderList.indexOf('userName') != -1" />
      <el-table-column label="用户单位" align="center" prop="userCompany" v-if="tableHeaderList.indexOf('userCompany') != -1" />
      <el-table-column label="工单类型" align="center" prop="orderClassName" v-if="tableHeaderList.indexOf('orderType') != -1" />
      <el-table-column label="AC账号" align="center" prop="userAccount"></el-table-column>
      <el-table-column label="联系方式" align="center" prop="concatPhone"></el-table-column>
       <el-table-column></el-table-column>
      <el-table-column label="变更前资源情况" show-overflow-tooltip width="360" align="center" prop="resourceAgo" v-if="tableHeaderList.indexOf('resourceAgo') != -1" />
      <el-table-column label="变更后资源情况" show-overflow-tooltip  width="360" align="center" prop="resourceAfter" v-if="tableHeaderList.indexOf('resourceAfter') != -1" />
      <el-table-column label="变更后到期时间" align="center" prop="expireTime" width="180" v-if="tableHeaderList.indexOf('expireTime') != -1" >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.expireTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="到期是否调整默认资源或其他" align="center" prop="isAdjust" v-if="tableHeaderList.indexOf('isAdjust') != -1" >
        <template slot-scope="scope">
          <span>{{ scope.row.isAdjust==0?'否':'是' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="工单处理人" align="center" prop="orderTacklePeople" v-if="tableHeaderList.indexOf('orderTacklePeople') != -1" />
      <el-table-column label="备注" align="center" prop="remarks" v-if="tableHeaderList.indexOf('remarks') != -1" />
      <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)"
            v-hasPermi="['cs:csRenewalRecord:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['cs:csRenewalRecord:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

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

    <!-- 添加或修改续期记录对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="50%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="150px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="工单处理日期" prop="tackleTime">
              <el-date-picker clearable v-model="form.tackleTime" type="date" value-format="yyyy-MM-dd"
                placeholder="请选择工单处理日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工单账号" prop="orderAccount">
              <el-input v-model="form.orderAccount" placeholder="请输入工单账号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户姓名" prop="memberUserId">
              <el-select v-model="form.memberUserId" clearable placeholder="请选择用户姓名" class="member-select">
                <el-option v-for="item in memberUserIdList" :key="item.memberUserId" :label="item.realName"
                  :value="item.memberUserId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户单位" prop="userCompanyId">
              <el-select v-model="form.userCompanyId" clearable placeholder="请选择用户单位"  @change="changeUserCompanyId">
                <el-option v-for="item in userCompanyIdList" :key="item.companyId" :label="item.companyName"
                  :value="`${item.companyId}-${item.companyName}`">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="变更前资源情况" prop="resourceAgo">
              <el-input v-model="form.resourceAgo" placeholder="请输入变更前资源情况" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="变更后资源情况" prop="resourceAfter">
              <el-input v-model="form.resourceAfter" placeholder="请输入变更后资源情况" />
            </el-form-item>
          </el-col>
          <el-col :span="12">

            <el-form-item label="变更后到期时间" prop="expireTime">
              <el-date-picker clearable v-model="form.expireTime" type="date" value-format="yyyy-MM-dd"
                placeholder="请选择变更后到期时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="到期调整默认资源" prop="isAdjust">
                <el-radio-group v-model="form.isAdjust">
                  <el-radio :label="0">否</el-radio>
                  <el-radio :label="1">是</el-radio>
                </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="工单处理人" prop="orderTacklePeople">
              <el-input v-model="form.orderTacklePeople" placeholder="请输入工单处理人" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remarks">
              <el-input type="textarea" :rows="2" v-model="form.remarks" placeholder="请输入备注" maxlength="100" />
            </el-form-item>
          </el-col>
        </el-row>
      </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 {
    searchMemberList,
    searchCompanyList,
  } from "@/api/cs/csExpansionRecord";
  import { listCsRenewalRecord, getCsRenewalRecord, delCsRenewalRecord, addCsRenewalRecord, updateCsRenewalRecord } from "@/api/cs/csRenewalRecord";

  export default {
    name: "CsRenewalRecord",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 续期记录表格数据
        csRenewalRecordList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          keyword: '',
          dateRange: [],
          resId: null,
          resName: null,
          resType: null,
          resourceClassId: null,
          resourceClass: null,
          tackleTime: null,
          orderAccount: null,
          userName: null,
          userCompanyId: null,
          userCompany: null,
          orderType: null,
          resourceAgo: null,
          resourceAfter: null,
          expireTime: null,
          isAdjust: null,
          orderTacklePeople: null,
          remarks: null,
          content: null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
        },

        showSearch: false,
        options: [{
          value: 'tackleTime',
          label: '工单处理日期'
        }, {
          value: 'orderAccount',
          label: '工单账号'
        }, {
          value: 'userName',
          label: '用户姓名'
        }, {
          value: 'userCompany',
          label: '用户单位'
        }, {
          value: 'orderType',
          label: '工单类型'
        }, {
          value: 'resourceAgo',
          label: '变更前资源情况'
        }, {
          value: 'resourceAfter',
          label: '变更后资源情况'
        }, {
          value: 'expireTime',
          label: '变更后到期时间'
        }, {
          value: 'isAdjust',
          label: '到期是否调整默认资源或其他'
        }, {
          value: 'orderTacklePeople',
          label: '工单处理人'
        }, {
          value: 'remarks',
          label: '备注'
        },
        {
          value: 'userAccount',
          label: 'AC账号'
        },
        {
          value: 'concatPhone',
          label: '联系方式'
        }
        ],
        tableHeaderList: [
          'tackleTime',
          'orderAccount',
          'userName',
          'userCompany',
          'orderType',
          'resourceAgo',
          'resourceAfter',
          'expireTime',
          'isAdjust',
          'orderTacklePeople',
          'remarks',
        ],
        memberUserIdList: [],
        userCompanyIdList: []
      };
    },
    created() {
      this.getList();
      this.searchMemberList()
      this.searchCompanyList()
    },
    methods: {
      searchMemberList() {
        searchMemberList().then(res => {
          if (res.code == 200) {
            this.memberUserIdList = res.data
          }
        })
      },
      searchCompanyList() {
        searchCompanyList().then(res => {
          if (res.code == 200) {
            this.userCompanyIdList= res.data
          }
        })
      },
      changeUserCompanyId(val){
        if(val){
          this.form.userCompany=val.split('-')[1]
        }
      },
      /** 查询续期记录列表 */
      getList() {
        this.loading = true;
        if (null != this.queryParams.dateRange && '' != this.queryParams.dateRange) {
          this.queryParams["beginCreateAt"] = this.queryParams.dateRange[0];
          this.queryParams["endCreateAt"] = this.queryParams.dateRange[1];
        }
        listCsRenewalRecord(this.queryParams).then(response => {
          this.csRenewalRecordList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      handleSearch() {
        this.showSearch = !this.showSearch
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          renewalRecordId: null,
          resId: null,
          resName: null,
          resType: null,
          resourceClassId: null,
          resourceClass: null,
          tackleTime: null,
          orderAccount: null,
          userName: null,
          userCompanyId: null,
          userCompany: null,
          orderType: null,
          resourceAgo: null,
          resourceAfter: null,
          expireTime: null,
          isAdjust: null,
          orderTacklePeople: null,
          remarks: null,
          content: null,
          status: "0",
          sort: null,
          createAt: null,
          updateAt: null,
          delFlag: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.showSearch = false
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          keyword: '',
          dateRange: [],
          resId: null,
          resName: null,
          resType: null,
          resourceClassId: null,
          resourceClass: null,
          tackleTime: null,
          orderAccount: null,
          userName: null,
          userCompanyId: null,
          userCompany: null,
          orderType: null,
          resourceAgo: null,
          resourceAfter: null,
          expireTime: null,
          isAdjust: null,
          orderTacklePeople: null,
          remarks: null,
          content: null,
        },

        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.renewalRecordId)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.$set(this.form,'isAdjust',0)
        // this.reset();
        this.open = true;
        this.title = "添加续期记录";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const renewalRecordId = row.renewalRecordId || this.ids
        getCsRenewalRecord(renewalRecordId).then(response => {

          this.form = response.data;
        this.form.isAdjust=Number(this.form.isAdjust)
          this.open = true;
          this.title = "修改续期记录";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.renewalRecordId != null) {
              updateCsRenewalRecord(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addCsRenewalRecord(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const renewalRecordIds = row.renewalRecordId || this.ids;
        this.$modal.confirm('是否确认删除续期记录编号为"' + renewalRecordIds + '"的数据项？').then(function () {
          return delCsRenewalRecord(renewalRecordIds);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => { });
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('cs/csRenewalRecord/export', {
          ...this.queryParams
        }, `续期记录_${new Date().getTime()}.xlsx`)
      },
      handleExportTemplate() {
        this.download('cs/csRenewalRecord/exportTemplate', {
          ...this.queryParams
        }, `续期记录模板_${new Date().getTime()}.xlsx`)
      },
    }
  };
</script>
<style scoped>
  .searchForm {
    width: 650px;
    padding: 20px;
    position: absolute;
    left: 200px;
    z-index: 100;
    background-color: #FFFFFF;
    border: 1px solid #777777;
  }
</style>
