<template>
  <div>
    <el-form :model="ruleForm" :rules="rulesSt" ref="ruleForm" label-width="130px" class="demo-ruleForm">
      <el-form-item label="策略名称" prop="policyName">
        <el-input v-model="ruleForm.policyName" placeholder="请输入" maxlength="50"></el-input>
      </el-form-item>
      <el-form-item label="适用资源" prop="applicableResources">
        <el-radio-group v-model="ruleForm.applicableResources">
          <el-radio label="商铺" value="商铺">商铺</el-radio>
          <el-radio label="场地" value="场地">场地</el-radio>
          <el-radio label="广告位" value="广告位">广告位</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="策略模板" prop="policyTemplate">
        <el-select v-model="ruleForm.policyTemplate" placeholder="请选择" style="width:calc(100% - 100px);"
          @change="changeMode">
          <el-option :label="item.policyName" :value="item.id" v-for="(item,index) in tableData" />
        </el-select>
        <el-button style="background-color: #3F9B6A;color: #fff;float: right;" @click="modeCode = true">管理模板
        </el-button>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否出租" prop="isRental">
            <el-select v-model="ruleForm.isRental" placeholder="请选择" style="width: 100%;">
              <el-option label="自营" value="0" />
              <el-option label="是" value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="ruleForm.applicableResources == '商铺'">
          <el-form-item label="经营类型" prop="businessType">
            <!-- <el-select v-model="ruleForm.businessType" placeholder="请选择" style="width: 100%;">
              <el-option label="超市" value="超市" />
              <el-option label="鞋店" value="鞋店" />
              <el-option label="家居饰品店" value="家居饰品店" />
            </el-select> -->
            <el-input v-model="ruleForm.businessType" placeholder="请输入" maxlength="50"></el-input>
          </el-form-item>
          
        </el-col>
        <el-col :span="12" v-if="ruleForm.isRental !== '0'">
          <el-form-item label="租金价格" prop="rentalPrice">
            <el-input v-model.number="ruleForm.rentalPrice" placeholder="请输入" maxlength="30" @input="validateNumber1('rentalPrice', $event)">
              <template slot="suffix" v-if="ruleForm.applicableResources == '商铺'"><span style="position: absolute;top: 0px;right: 1px;width: 50px;">元/m<sup>2</sup></span></template>
              <template slot="suffix" v-else><span style="position: absolute;top: 0px;right: 1px;width: 50px;">元</span></template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="ruleForm.isRental !== '0'">
          <el-form-item label="付款周期" prop="leaseTerm">
            <el-select v-model="ruleForm.leaseTerm" placeholder="请选择" style="width: 100%;">
              <el-option label="日" value="日" />
              <el-option label="月" value="月" />
              <el-option label="季" value="季" />
              <el-option label="年" value="年" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="ruleForm.isRental !== '0'?'租赁时段':'使用周期'" prop="leaseDate">
            <el-date-picker v-model="leaseDate" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
              style="width: 100%;" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="ruleForm.isRental !== '0'">
          <el-form-item label="免租条件" prop="rentFreeCondition">
            <el-input v-model="ruleForm.rentFreeCondition" placeholder="请输入" maxlength="50"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="ruleForm.isRental !== '0'">
          <el-form-item label="免租期" prop="rentFreePeriod">
            <!-- <el-select v-model="ruleForm.rentFreePeriod" placeholder="请选择" style="width: 100%;">
              <el-option :label="item" :value="item" v-for="item in 31" />
            </el-select> -->
            <el-input v-model="ruleForm.rentFreePeriod" placeholder="请输入" maxlength="50"></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12" v-if="ruleForm.isRental !== '0'">
          <el-form-item label="付款日" prop="payDay">
            <el-select v-model="ruleForm.payDay" placeholder="请选择" style="width: 100%;">
              <el-option :label="item" :value="item" v-for="item in 31" />
            </el-select>
          </el-form-item>
        </el-col> -->
      </el-row>
      <el-form-item v-if="ruleForm.isRental !== '0'" label="优惠政策" prop="preferentialPolicy">
        <wangEditor v-model="ruleForm.preferentialPolicy" ref="editor" :height="200"></wangEditor>
      </el-form-item>
      <el-form-item label="其他说明" prop="otherDescription">
        <wangEditor v-model="ruleForm.otherDescription" ref="editor" :height="200"></wangEditor>
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item>
            <div style="margin-top: 20px">
              <el-button @click="add()" style="background-color: #3F9B6A;color: #fff;">确定</el-button>
              <el-button @click="close()" class="buttonHover"
                style="color: #606266;border: 1px solid #DBDBDB;background-color: #fff;">取消</el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog title="模板管理" :visible.sync="modeCode" custom-class='bian_css' style="padding: 0;" width="65%" center
      :close-on-click-modal="false" append-to-body>
      <div style="padding:20px;">
        <div class="formSearch">
          <el-form :model="querymb" ref="querymb" label-width="80px" class="demo-ruleForm">
            <el-row>
              <el-col :span="12">
                <el-form-item label="策略名称" prop="policyName">
                  <el-input v-model="querymb.policyName" placeholder="请输入" maxlength="50"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="适用资源" prop="applicableResources">
                  <el-select v-model="querymb.applicableResources" placeholder="请选择" style="width: 100%;">
                    <el-option label="商铺" value="商铺">商铺</el-option>
                    <el-option label="场地" value="场地">场地</el-option>
                    <el-option label="广告位" value="广告位">广告位</el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div style="display: flex;">
            <el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff">查询
            </el-button>
            <el-button @click="resetting" class="buttonHover"
              style="color: #000;border: 1px solid #DBDBDB;background-color: #fff;">重置
            </el-button>
          </div>
        </div>
        <div style="margin-bottom:15px;">
          <el-button type="primary" @click="addmbopen"
            style="background-color: #3F9B6A;color: #fff;border-color:#3F9B6A;">新增模板</el-button>
        </div>
        <div>
          <el-table :data="tableData"
            :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
            <el-table-column label="序号" width="50">
              <template slot-scope="scope">
                {{scope.$index +1}}
              </template>
            </el-table-column>
            <el-table-column label="策略名称" prop="policyName">
            </el-table-column>
            <el-table-column label="适用资源" prop="applicableResources">
            </el-table-column>
            <el-table-column label="经营类型" prop="businessType">
            </el-table-column>
            <el-table-column prop="rentalPrice" label="租金/周期">
              <template slot-scope="scope">
                {{scope.row.rentalPrice}}/{{scope.row.leaseTerm}}
              </template>
            </el-table-column>
            <!-- <el-table-column label="付款日">
              <template slot-scope="scope">
                {{scope.row.payDay}}
              </template>
            </el-table-column> -->
            <el-table-column label="是否出租" prop="isRental">
              <template slot-scope="scope">
                {{scope.row.isrental == '0'?'自营':'是'}}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div @click="addM(scope.row)" class="tableBtn greens">编辑</div>
                <div @click="delM(scope.row.id)" class="tableBtn greens">删除</div>
              </template>
            </el-table-column>
          </el-table>
          <div style="display: flex;justify-content: space-between;" class="bom">
            <div style="font-size: 14px;">共 <span style="color: #3F9B6A;">{{total}}</span> 项数据</div>
            <el-pagination :current-page="querymb.pageNumber+1" :page-sizes="[10, 20, 50, 100]"
              :page-size="querymb.pageSize" background small layout="prev, pager, next" :total="total"
              @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </el-pagination>
          </div>
          <div style="margin-top:20px;">
            <el-button @click="closemblist()" style="background-color: #fff;color: #000;border: 1px solid #B1B1B1;"
              class="buttonHover">取 消</el-button>
          </div>
        </div>
      </div>
      <el-dialog :title="formInline.id?'编辑模板':'新增模板'" :visible.sync="addMing" custom-class='bian_css'
        style="padding: 0;" width="65%" center :close-on-click-modal="false" :show-close="false" append-to-body>
        <div style="padding:20px;">
          <el-form :model="formInline" :rules="rulesSt2" ref="formInline" label-width="130px" class="demo-ruleForm">
            <el-form-item label="策略名称" prop="policyName">
              <el-input v-model="formInline.policyName" placeholder="请输入" maxlength="50"></el-input>
            </el-form-item>
            <el-form-item label="适用资源" prop="applicableResources">
              <el-radio-group v-model="formInline.applicableResources">
                <el-radio label="商铺" value="商铺">商铺</el-radio>
                <el-radio label="场地" value="场地">场地</el-radio>
                <el-radio label="广告位" value="广告位">广告位</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="是否出租" prop="isRental">
                  <el-select v-model="formInline.isRental" placeholder="请选择" style="width: 100%;">
                    <el-option label="自营" value="0" />
                    <el-option label="是" value="1" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="formInline.applicableResources == '商铺'">
                <el-form-item label="经营类型" prop="businessType">
                  <!-- <el-select v-model="formInline.businessType" placeholder="请选择" style="width: 100%;">
                    <el-option label="超市" value="超市" />
                    <el-option label="鞋店" value="鞋店" />
                    <el-option label="家居饰品店" value="家居饰品店" />
                  </el-select> -->
                  <el-input v-model="formInline.businessType" placeholder="请输入" maxlength="50"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="formInline.isRental !== '0'">
                <el-form-item label="租金价格" prop="rentalPrice">
                  <el-input v-model.number="formInline.rentalPrice" placeholder="请输入" maxlength="30" @input="validateNumber2('rentalPrice', $event)">
                    <template slot="suffix" v-if="formInline.applicableResources == '商铺'"><span style="position: absolute;top: 0px;right: 1px;width: 50px;">元/m<sup>2</sup></span></template>
                    <template slot="suffix" v-else><span style="position: absolute;top: 0px;right: 1px;width: 50px;">元</span></template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="formInline.isRental !== '0'">
                <el-form-item label="付款周期" prop="leaseTerm">
                  <el-select v-model="formInline.leaseTerm" placeholder="请选择" style="width: 100%;">
                    <el-option label="日" value="日" />
                    <el-option label="月" value="月" />
                    <el-option label="季" value="季" />
                    <el-option label="年" value="年" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="formInline.isRental !== '0'?'租赁时段':'使用周期'" prop="leaseDate">
                  <el-date-picker v-model="leaseDate" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
                    style="width: 100%;" start-placeholder="开始日期" end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="formInline.isRental !== '0'">
                <el-form-item label="免租条件" prop="rentFreeCondition">
                  <el-input v-model="formInline.rentFreeCondition" placeholder="请输入" maxlength="50"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="formInline.isRental !== '0'">
                <el-form-item label="免租期" prop="rentFreePeriod">
                  <el-input v-model="formInline.rentFreePeriod" placeholder="请输入" maxlength="50"></el-input>
                  <!-- <el-select v-model="formInline.rentFreePeriod" placeholder="请选择" style="width: 100%;">
                    <el-option :label="item" :value="item" v-for="item in 31" />
                  </el-select> -->
                </el-form-item>
              </el-col>
              <!-- <el-col :span="12" v-if="formInline.isRental !== '0'">
                <el-form-item label="付款日" prop="payDay">
                  <el-select v-model="formInline.payDay" placeholder="请选择" style="width: 100%;">
                    <el-option :label="item" :value="item" v-for="item in 31" />
                  </el-select>
                </el-form-item>
              </el-col> -->
            </el-row>
            <el-form-item v-if="formInline.isRental !== '0'" label="优惠政策" prop="preferentialPolicy">
              <wangEditor v-model="formInline.preferentialPolicy" ref="editor" :height="200"></wangEditor>
            </el-form-item>
            <el-form-item label="其他说明" prop="otherDescription">
              <wangEditor v-model="formInline.otherDescription" ref="editor" :height="200"></wangEditor>
            </el-form-item>
          </el-form>
          <div style="display: flex;justify-content: flex-end;margin-top:20px;">
            <el-button @click="closemb()" style="background-color: #fff;color: #000;border: 1px solid #B1B1B1;"
              class="buttonHover">取 消</el-button>
            <el-button type="primary" @click="addmb()"
              style="background-color: #3F9B6A;color: #fff;border-color:#3F9B6A;">确 定</el-button>
          </div>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
  import {
    ceGetAll,
    ceAdd,
    ceEdit,
    ceDel,
  } from '@/api/sam.js'
  import wangEditor from "@/components/editor/index"
  export default {
    components: {
      wangEditor
    },
    data() {
      return {
        addMing: false,
        modeAdd: false,
        modeCode: false,
        leaseDate: [], //租赁时段
        paymentDate: [], //付款日期
        tableData: [],
        formInline: {
          policyName: '', //策略名称
          applicableResources: '商铺', //适用资源
          policyTemplate: null, //策略模板
          isRental: '', //是否出租 (0:白营,1:是)
          businessType: '', //经营类型
          rentalPrice: null, //租金价格
          leaseTerm: '', //商铺租期
          leaseStartDate: '', //租赁开始日期
          leaseEndDate: '', //租赁结束日期
          rentFreeCondition: '', //免租条件
          rentFreePeriod: '', //免租期(单位:天)
          payDay: '', //付款日
          createDate: '', //创建时间
          preferentialPolicy: '',
          otherDescription: '',
          isTemplate: '0', //是否为模板(0.是 1.否)
        },
        ruleForm: {
          policyName: '', //策略名称
          applicableResources: '商铺', //适用资源
          policyTemplate: null, //策略模板
          isRental: '', //是否出租 (0:白营,1:是)
          businessType: '', //经营类型
          rentalPrice: null, //租金价格
          leaseTerm: '', //商铺租期
          leaseStartDate: '', //租赁开始日期
          leaseEndDate: '', //租赁结束日期
          rentFreeCondition: '', //免租条件
          rentFreePeriod: '', //免租期(单位:天)
          payDay: '', //付款日
          createDate: '', //创建时间
          preferentialPolicy: '',
          otherDescription: '',
          isTemplate: '0', //是否为模板(0.是 1.否)
        },
        rulesSt2: {
          policyName: [{
            required: true,
            message: '请输入策略名称',
            trigger: 'blur'
          }, ],
          applicableResources: [{
            required: true,
            message: '请选择适用资源',
            trigger: 'change'
          }],
          isRental: [{
            required: true,
            message: '请选择是否出租',
            trigger: 'change'
          }],
          isSelfOperated: [{
            required: true,
            message: '请选择是否出租',
            trigger: 'change'
          }],
          businessType: [{
            required: true,
            message: '请选择经营类型',
            trigger: 'change'
          }],
          rentalPrice: [{
              required: true,
              message: '请输入租金价格',
              trigger: 'change'
            },
            // {
            //   type: 'number',
            //   message: '必须为数字值'
            // },
            {
              trigger: 'change',
              validator: (rule, value, callback) => {
                if (value <= 0) {
                  callback(new Error('租金价格必须大于0'));
                } else {
                  callback();
                }
              }
            }
          ],
        },
        rulesSt: {
          policyName: [{
            required: true,
            message: '请输入策略名称',
            trigger: 'blur'
          }, ],
          applicableResources: [{
            required: true,
            message: '请选择适用资源',
            trigger: 'change'
          }],
          isRental: [{
            required: true,
            message: '请选择是否出租',
            trigger: 'change'
          }],
          isSelfOperated: [{
            required: true,
            message: '请选择是否出租',
            trigger: 'change'
          }],
          businessType: [{
            required: true,
            message: '请选择经营类型',
            trigger: 'change'
          }],
          rentalPrice: [{
              required: true,
              message: '请输入租金价格',
              trigger: 'change'
            },
            // {
            //   type: 'number',
            //   message: '必须为数字值'
            // },
            {
              validator: (rule, value, callback) => {
                if (value <= 0) {
                  callback(new Error('租金价格必须大于0'));
                } else {
                  callback();
                }
              }
            }
          ],
        },
        querymb: {
          pageNumber: 0,
          pageSize: 10,
          isTemplate: '0'
        },
        total: 0
      };
    },
    props: {
      info: {
        type: Object,
        default: {}
      },

    },
    async created() {
      this.getmb()
      if (this.info && this.info.id) {
        this.ruleForm = this.info
      } else {

      }
    },
    methods: {
      addmbopen() {
        this.formInline = {
          policyName: '', //策略名称
          applicableResources: '商铺', //适用资源
          policyTemplate: null, //策略模板
          isRental: '', //是否出租 (0:白营,1:是)
          businessType: '', //经营类型
          rentalPrice: null, //租金价格
          leaseTerm: '', //商铺租期
          leaseStartDate: '', //租赁开始日期
          leaseEndDate: '', //租赁结束日期
          rentFreeCondition: '', //免租条件
          rentFreePeriod: '', //免租期(单位:天)
          payDay: '', //付款日
          createDate: '', //创建时间
          preferentialPolicy: '',
          otherDescription: '',
          isTemplate: '0', //是否为模板(0.是 1.否)
        }
        this.addMing = true
      },
      delM(ids) {
        const h = this.$createElement;
        this.$msgbox({
          title: '消息',
          message: h('p', null, [
            h('span', null, '是否删除 '),
          ]),
          showCancelButton: true,
          showClose: false,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          customClass: 'oe-dialog-btn',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              ceDel({
                id: ids
              }).then(res => {
                this.$message({
                  message: '删除成功',
                  type: 'success'
                })
                this.getmb()
                done();
              })
            } else {
              done();
            }
          }
        })

      },
      addM(e) {
        this.formInline = JSON.parse(JSON.stringify(e))
        this.addMing = true
      },
      closemblist() {
        this.modeCode = false
      },
      validateNumber1(index, value) {
        // 使用正则表达式确保输入的是数字，并且可以包含最多两位小数
        let c1 = value
        const regex = /^\d+(\.\d{1,2})?$/;
        if (!regex.test(value)) {
          c1 = value.replace(/[^\d.]/g, '').replace(/(\.\d{2}).*$/, '$1');
          
        }
        this.ruleForm[index] = c1
      },
      
      validateNumber2(index, value) {
        // 使用正则表达式确保输入的是数字，并且可以包含最多两位小数
        let c1 = value
        const regex = /^\d+(\.\d{1,2})?$/;
        if (!regex.test(value)) {
          c1 = value.replace(/[^\d.]/g, '').replace(/(\.\d{2}).*$/, '$1');
          
        }
        this.formInline[index] = c1
      },
      onSubmit() {
        this.getmb()
      },
      resetting() {
        this.querymb = {
          pageNumber: 0,
          pageSize: 10,
          isTemplate: '0'
        }
        this.getmb()
      },
      handleSizeChange() {

      },
      handleCurrentChange() {

      },
      async getmb() {
        const res = await ceGetAll(this.querymb)
        this.tableData = res.data.content
        this.total = res.data.totalElements
      },
      addmb() {
        console.error({
          ...this.formInline
        })
        this.formInline.isTemplate = '0'
        if (this.formInline.id) {
          if (this.leaseDate.length != 0) {
            this.formInline.leaseStartDate = this.leaseDate[0]
            this.formInline.leaseEndDate = this.leaseDate[1]
          }
          if (this.paymentDate.length != 0) {
            this.formInline.paymentStartDate = this.paymentDate[0]
            this.formInline.paymentEndDate = this.paymentDate[1]
          }
          this.$refs.formInline.validate((valid) => {
            if (valid) {
              this.formInline.createDate = this.updateCurrentTime()
              ceEdit(this.formInline).then(res => {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.addMing = false
                this.getmb()
              })
            } else {
              this.$message({
                message: '请填写完整信息',
                type: 'error'
              })
              return false;
            }
          })
        } else {
          if (this.leaseDate.length != 0) {
            this.formInline.leaseStartDate = this.leaseDate[0]
            this.formInline.leaseEndDate = this.leaseDate[1]
          }
          if (this.paymentDate.length != 0) {
            this.formInline.paymentStartDate = this.paymentDate[0]
            this.formInline.paymentEndDate = this.paymentDate[1]
          }
          this.$refs.formInline.validate((valid) => {
            if (valid) {
              this.formInline.createDate = this.updateCurrentTime()
              ceAdd(this.formInline).then(res => {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                this.addMing = false
                this.getmb()
              })
            } else {
              this.$message({
                message: '请填写完整信息',
                type: 'error'
              })
              return false;
            }
          })
        }
        this.leaseDate = []
        this.paymentDate = []
      },
      closemb() {
        this.addMing = false
      },
      //获取当前时间
      updateCurrentTime() {
        const now = new Date();
        const year = now.getFullYear();
        const month = (now.getMonth() + 1).toString().padStart(2, '0');
        const day = now.getDate().toString().padStart(2, '0');
        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        const seconds = now.getSeconds().toString().padStart(2, '0');

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      },
      add() {
        this.ruleForm.isTemplate = '1'
        if (this.ruleForm.id) {
          if (this.leaseDate.length != 0) {
            this.ruleForm.leaseStartDate = this.leaseDate[0]
            this.ruleForm.leaseEndDate = this.leaseDate[1]
          }
          if (this.paymentDate.length != 0) {
            this.ruleForm.paymentStartDate = this.paymentDate[0]
            this.ruleForm.paymentEndDate = this.paymentDate[1]
          }
          this.$refs.ruleForm.validate((valid) => {
            if (valid) {
              this.ruleForm.createDate = this.updateCurrentTime()
              ceEdit(this.ruleForm).then(res => {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.$emit('removeonaction', '1')
              })
            } else {
              this.$message({
                message: '请填写完整信息',
                type: 'error'
              })
              return false;
            }
          })
        } else {
          if (this.leaseDate.length != 0) {
            this.ruleForm.leaseStartDate = this.leaseDate[0]
            this.ruleForm.leaseEndDate = this.leaseDate[1]
          }
          if (this.paymentDate.length != 0) {
            this.ruleForm.paymentStartDate = this.paymentDate[0]
            this.ruleForm.paymentEndDate = this.paymentDate[1]
          }
          this.$refs.ruleForm.validate((valid) => {
            if (valid) {
              this.ruleForm.createDate = this.updateCurrentTime()
              ceAdd(this.ruleForm).then(res => {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                this.$emit('removeonaction', '1')
              })
            } else {
              this.$message({
                message: '请填写完整信息',
                type: 'error'
              })
              return false;
            }
          })
        }
        this.leaseDate = []
        this.paymentDate = []
      },
      close() {
        this.$emit('removeonaction', '1')
      },
      changeMode(value) {
        console.log(value)
        const pageindex = {
          pageNumber: 0,
          pageSize: 10,
          id: value
        }
        ceGetAll(pageindex).then(res => {
          const {
            id,
            createDate,
            policyTemplate,
            pageNumber,
            pageSize,
            updateDate,
            ...rest
          } = res.data.content[0]
          this.ruleForm = rest
          this.ruleForm.policyTemplate = value
          this.ruleForm.rentalPrice = Number(res.data.content[0].rentalPrice)
          this.$set(this.leaseDate, 0, res.data.content[0].leaseStartDate);
          this.$set(this.leaseDate, 1, res.data.content[0].leaseEndDate);
          this.$set(this.paymentDate, 0, res.data.content[0].paymentStartDate);
          this.$set(this.paymentDate, 1, res.data.content[0].paymentEndDate);

        })
      },
    },
  };
</script>
<style lang="scss">
  .el-upload {
    display: block;
    /* text-align: left; */
  }

  .video-uploader {
    .el-upload {
      text-align: left;
    }
  }

  .el-dialog__header {
    background-color: #F2F3F5;
    text-align: left;
  }

  .el-dialog__title {
    line-height: 30px;
    font-size: 15px;
    color: #303133;
  }

  .demo-input-suffix {
    display: flex;
    margin-right: 20px;
    width: 83%;

    .el-input__inner {
      height: 32px;
    }
  }

  .formSearch {
    display: flex;
    width: 100%;
    font-size: 14px;
    justify-content: space-between;
  }
</style>
