<template>
  <el-dialog title="新增页" :visible.sync="xinShow" custom-class='bian_css' style="padding: 0;" width="65%" center
    :close-on-click-modal="false" @close="close" >
    <div style="padding:20px;" class="xinFrom">
      <el-form  :model="form" :rules="rulesform"  ref="ruleForm"  label-width="80px">
        <el-form-item label="策略名称" prop="policyName">
          <el-input v-model="form.policyName" placeholder="请输入" style="width: 87%;margin-right: 15px"  maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="适用资源" prop="applicableResources">
          <el-radio-group v-model="form.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="form.policyTemplate" placeholder="请选择" style="width: 87%;margin-right: 15px" @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" @click="modeCode = true">管理模板
          </el-button>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否出租" prop="isRental">
              <el-select v-model="form.isRental" placeholder="请选择" style="width: 72%;margin-right: 15px">
                <el-option label="自营" value="0" />
                <el-option label="是" value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经营类型" prop="businessType" v-if="form.applicableResources == '商铺'">
              <el-input v-model="form.businessType" placeholder="请输入" style="width:  72%;margin-right: 15px"  maxlength="50"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>

          <el-col :span="12">
            <el-form-item label="租金价格" prop="rentalPrice">
              <el-input v-model.number="form.rentalPrice" placeholder="请输入" style="width: 72%;margin-right: 15px;" maxlength="30">
                <template slot="suffix"><span
                    style="position: absolute;top: 19px;right: 1px;width: 50px;">元/m<sup>2</sup></span></template>
                <!-- <i slot="suffix" class="el-input__icon el-icon-date"></i> -->
              </el-input>

            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款周期" prop="leaseTerm">
              <el-select v-model="form.leaseTerm" placeholder="请选择" style="width: 72%;margin-right: 15px">
                <el-option label="日" value="日" />
                <el-option label="月" value="月" />
                <el-option label="季" value="季" />
                <el-option label="年" value="年" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <!-- <el-col :span="12">
            <el-form-item label="商铺租期" prop="leaseTerm">
              <el-input v-model="form.leaseTerm" style="width: 72%;"  placeholder="请输入/年或/月" maxlength="20"></el-input>

            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="租赁时段" prop="leaseDate">
              <el-date-picker v-model="leaseDate" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" style="width: 72%;">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="免租条件" prop="rentFreeCondition">
              <el-input v-model="form.rentFreeCondition" placeholder="请输入" style="width: 72%;" maxlength="50"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>

          <el-col :span="12">
            <el-form-item label="免租期" prop="rentFreePeriod">
              <!-- <el-input v-model="form.rentFreePeriod" placeholder="请输入/天" style="width: 72%;" maxlength="20"></el-input> -->
              <el-select v-model="form.rentFreePeriod" placeholder="请选择" style="width: 72%;margin-right: 15px">
                <el-option :label="item" :value="item" v-for="item in 31" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款日" prop="payDay">
              <!-- <el-input v-model="form.payDay" placeholder="请输入" style="width: 72%;" maxlength="50"></el-input> -->
              <el-select v-model="form.payDay" placeholder="请选择" style="width: 72%;margin-right: 15px">
                <el-option :label="item" :value="item" v-for="item in 31" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>

          <el-col :span="24">
            <el-form-item label="优惠政策" prop="preferentialPolicy">

              <wangEditor v-model="form.preferentialPolicy" ref="editor" :height="100"></wangEditor>

            </el-form-item>
          </el-col>

        </el-row>
        <el-row>

          <el-col :span="24">
            <el-form-item label="其他说明" prop="otherDescription">

              <wangEditor v-model="form.otherDescription" ref="editor" :height="100"></wangEditor>
            </el-form-item>
          </el-col>

        </el-row>

      </el-form>
      <div style="display: flex;justify-content: flex-end;margin-top:20px;">
        <el-button @click="closeFn()" style="background-color: #fff;color: #000;border: 1px solid #B1B1B1;"
          class="buttonHover">取 消</el-button>
        <el-button type="primary" @click="addCheck(1)"
          style="background-color: #3F9B6A;color: #fff;border-color:#3F9B6A;">确 定</el-button>

      </div>
    </div>

    <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 style="margin-bottom:15px;">
          <el-button type="primary" @click="addM(1)"
            style="background-color: #3F9B6A;color: #fff;border-color:#3F9B6A;">新增模板</el-button>
        </div>
        <div>
          <div style="border: 1px solid #E5E5E5;padding: 1px">
            <div
              style="padding: 10px 13px;font-size: 14px;border-bottom: 1px solid #E5E5E5;display: flex;justify-content: space-between;">
              <div>招商资源管理</div>
            </div>
            <div style="padding: 15px;">
              <div style="padding: 0px 20px 0px 0px">
                <el-table :data="tableData"
                  :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
                  <el-table-column label="策略名称" width="250" prop="policyName">
                  </el-table-column>
                  <el-table-column label="适用资源" width="120" prop="applicableResources">
                  </el-table-column>
                  <el-table-column label="是否出租" prop="isRental" width="120">
                    <template slot-scope="scope">
                      {{scope.row.isrental == '0'?'自营':'是'}}
                    </template>
                  </el-table-column>

                  <el-table-column label="经营类型" prop="businessType" width="150">
                  </el-table-column>
                  <el-table-column prop="rentalPrice" label="租金价格" width="150">
                  </el-table-column>
                  <el-table-column prop="leaseTerm" label="商铺租期" width="120">
                  </el-table-column>
                  <el-table-column label="租赁时段" width="250">
                    <template slot-scope="scope">
                      {{scope.row.leaseStartDate}}至{{scope.row.leaseEndDate}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="rentFreeCondition" label="免租条件" width="150">
                  </el-table-column>
                  <el-table-column prop="rentFreePeriod" label="免租期" width="150">
                  </el-table-column>
                  <el-table-column prop="paymentTerms" label="付款条件" width="200">
                  </el-table-column>
                  <el-table-column label="付款日期" width="200">
                    <template slot-scope="scope">
                      {{scope.row.paymentStartDate}}至{{scope.row.paymentEndDate}}
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                      <!-- <div @click="" class="tableBtn greens">复制模板</div> -->
                      <div @click="addM(2,scope.row)" class="tableBtn greens">编辑</div>
                      <div @click="delM(scope.row.id)" class="tableBtn greens">删除</div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-dialog :title="modeAdd?'新增模板':'编辑模板'" :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="formInlineRules" ref="formInlineRules" label-width="80px">
           <el-form-item label="策略名称" prop="policyName">
             <el-input v-model="formInline.policyName" placeholder="请输入" style="width: 87%;margin-right: 15px"  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: 72%;margin-right: 15px">
                   <el-option label="自营" value="0" />
                   <el-option label="是" value="1" />
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="经营类型" prop="businessType" v-if="formInline.applicableResources == '商铺'">
                 <el-input v-model="formInline.businessType" placeholder="请输入" style="width:  72%;margin-right: 15px"  maxlength="50"></el-input>
               </el-form-item>
             </el-col>
           </el-row>
           <el-row>

             <el-col :span="12">
               <el-form-item label="租金价格" prop="rentalPrice">
                 <el-input v-model.number="formInline.rentalPrice" placeholder="请输入" style="width: 72%;margin-right: 15px;" maxlength="30">
                   <template slot="suffix"><span
                       style="position: absolute;top: 19px;right: 1px;width: 50px;">元/m<sup>2</sup></span></template>

                 </el-input>

               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="付款周期" prop="leaseTerm">
                 <el-select v-model="formInline.leaseTerm" placeholder="请选择" style="width: 72%;margin-right: 15px">
                   <el-option label="日" value="日" />
                   <el-option label="月" value="月" />
                   <el-option label="季" value="季" />
                   <el-option label="年" value="年" />
                 </el-select>
               </el-form-item>
             </el-col>
           </el-row>
           <el-row>

             <el-col :span="12">
               <el-form-item label="租赁时段" prop="leaseDate">
                 <el-date-picker v-model="leaseDate" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
                   start-placeholder="开始日期" end-placeholder="结束日期" style="width: 72%;">
                 </el-date-picker>
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="免租条件" prop="rentFreeCondition">
                 <el-input v-model="formInline.rentFreeCondition" placeholder="请输入" style="width: 72%;" maxlength="50"></el-input>
               </el-form-item>
             </el-col>
           </el-row>
           <el-row>

             <el-col :span="12">
               <el-form-item label="免租期" prop="rentFreePeriod">

                 <el-select v-model="formInline.rentFreePeriod" placeholder="请选择" style="width: 72%;margin-right: 15px">
                   <el-option :label="item" :value="item" v-for="item in 31" />
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="付款日" prop="payDay">

                 <el-select v-model="formInline.payDay" placeholder="请选择" style="width: 72%;margin-right: 15px">
                   <el-option :label="item" :value="item" v-for="item in 31" />
                 </el-select>
               </el-form-item>
             </el-col>
           </el-row>
           <el-row>

              <el-col :span="24">
                <el-form-item label="优惠政策" prop="preferentialPolicy">

                  <wangEditor v-model="formInline.preferentialPolicy" ref="editor" :height="100"></wangEditor>

                </el-form-item>
              </el-col>

            </el-row>
            <el-row>

              <el-col :span="24">
                <el-form-item label="其他说明" prop="otherDescription">

                  <wangEditor v-model="formInline.otherDescription" ref="editor" :height="100"></wangEditor>
                </el-form-item>
              </el-col>

            </el-row>
          </el-form>
          <div style="display: flex;justify-content: flex-end;margin-top:20px;">
            <el-button @click="MingClose()" style="background-color: #fff;color: #000;border: 1px solid #B1B1B1;"
              class="buttonHover">取 消</el-button>
            <el-button type="primary" @click="addCheck(2)"
              style="background-color: #3F9B6A;color: #fff;border-color:#3F9B6A;">确 定</el-button>

          </div>
        </div>

      </el-dialog>
    </el-dialog>
  </el-dialog>

</template>

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

        }
      }
    },
    mounted() {
this.getAll()
    },

    methods: {
      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}`;
      },
      //查询模板全数据
      async getAll() {
        const res = await ceGetAll(this.pageindex)
        this.tableData = res.data.content
      },
      guanLi() {
        this.modeCode = true
      },
      addM(val, item) {
        this.leaseDate = []
        this.paymentDate = []
        if (val == 1) {
          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.否)
        }
        } else {
          this.leaseDate[0] = item.leaseStartDate
           this.leaseDate[1] = item.leaseEndDate
           this.paymentDate[0] = item.paymentStartDate
            this.paymentDate[1] = item.paymentEndDate
          this.formInline = item
          this.modeAdd =false
        }
        this.addMing = true
      },
      closeFn() {
        this.form = {
          policyName: '', //策略名称
          applicableResources: '商铺', //适用资源
          policyTemplate: null, //策略模板
          isRental: '', //是否出租 (0:白营,1:是)
          businessType: '', //经营类型
          rentalPrice: null, //租金价格
          leaseTerm: '', //商铺租期
          leaseStartDate: '', //租赁开始日期
          leaseEndDate: '', //租赁结束日期
          rentFreeCondition: '', //免租条件
          rentFreePeriod: '', //免租期(单位:天)
          payDay: '', //付款日
          createDate: '', //创建时间
          isTemplate: '1', //是否为模板(0.是 1.否)
          preferentialPolicy:'',
          otherDescription:''
        }
        this.paymentDate=[]
        this.leaseDate = []
        this.$emit('childClose', false);

      },
      close(){

          this.form = {
          policyName: '', //策略名称
          applicableResources: '商铺', //适用资源
          policyTemplate: null, //策略模板
          isRental: '', //是否出租 (0:白营,1:是)
          businessType: '', //经营类型
          rentalPrice: null, //租金价格
          leaseTerm: '', //商铺租期
          leaseStartDate: '', //租赁开始日期
          leaseEndDate: '', //租赁结束日期
          rentFreeCondition: '', //免租条件
          rentFreePeriod: '', //免租期(单位:天)
          payDay: '', //付款日
          createDate: '', //创建时间
          isTemplate: '1', //是否为模板(0.是 1.否)
          preferentialPolicy:'',
          otherDescription:''
        }
          this.paymentDate=[]
          this.leaseDate = []
          this.$emit('childClose', false);


      },
      MingClose(){
        this.addMing = false
        this.paymentDate=[]
        this.leaseDate = []
      },
      addCheck(val) {
        if (val == 1) {
          this.form.isTemplate = '1'
          console.log(this.form)
          if (this.leaseDate.length !=0) {
            this.form.leaseStartDate = this.leaseDate[0]
            this.form.leaseEndDate = this.leaseDate[1]
          }
          if (this.paymentDate.length !=0) {
            this.form.paymentStartDate = this.paymentDate[0]
            this.form.paymentEndDate = this.paymentDate[1]
          }
          this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                    this.form.createDate =   this.updateCurrentTime()
                    ceAdd(this.form).then(res => {
                      this.$emit('childClose', false);
                    })
                    } else {
                   this.$message({
                     message: '请填写完整信息',
                     type: 'error'
                   })
                      return false;
                    }
                  })

        } else {
          this.form.isTemplate = '0'
          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.formInlineRules.validate((valid) => {
                    if (valid) {
                      if(this.modeAdd){
                        this.formInline.createDate =   this.updateCurrentTime()
                        ceAdd(this.formInline).then(res => {
                          this.addMing = false
                          this.getAll()
                        })
                      }else{
                        ceEdit(this.formInline).then(res => {
                          this.form = {
                             policyName: '', //策略名称
                             applicableResources: '商铺', //适用资源
                             policyTemplate: null, //策略模板
                             isRental: '', //是否出租 (0:否,1:是)
                             isSelfOperated: '', //是否白营 (0: 否, 1: 是)
                             businessType: '', //经营类型
                             rentalPrice: '', //租金价格
                             leaseTerm: '', //商铺租期
                             leaseStartDate: '', //租赁开始日期
                             leaseEndDate: '', //租赁结束日期
                             rentFreeCondition: '', //免租条件
                             rentFreePeriod: '', //免租期(单位:天)
                             paymentTerms: '', //付款条件
                             paymentStartDate: '', //付款开始日期
                             paymentEndDate: '', //付款结束日期
                             createDate: '', //创建时间
                             isTemplate: '1', //是否为模板(0.是 1.否)
                           }
                          this.paymentDate=[]
                          this.leaseDate = []
                          this.addMing = false
                          this.getAll()
                        })
                      }

                    } else {
                    this.$message({
                      message: '请填写完整信息',
                      type: 'error'
                    })
                      return false;
                    }
                  })

        }
         this.leaseDate=[]
         this.paymentDate=[]

      },
       changeMode(value){
        console.log(value)
        const pageindex = {
          pageNumber: 1,
          pageSize: 10,
          id:value
        }
      ceGetAll(pageindex).then(res=>{

           const  { id, createDate, policyTemplate,pageNumber,pageSize,updateDate, ...rest } = res.data.content[0]
           this.form = rest
          this.form.policyTemplate = value
          this.form.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);

      })
      },
      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.getAll()
                   done();
                 })
               } else {
                 done();
               }
             }
           })

      }
    }
  }
</script>

<style scoped>
  /deep/ .first-column-bg {
    background-color: #f4f4f5 !important;
  }

  .zhuti {
    padding: 10px;
    min-height: calc(100vh - 50px - 20px);
    background-color: #Fff;

  }

  /deep/ .el-form-item__content {
    line-height: 0;
  }

  ::v-deep .xinForm .el-form-item__content {
    line-height: 3;
  }

  .tableBtn {
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
  }



  .greens {
    color: #3F9B6A;
  }


  .fenye {
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
    position: relative;
  }

  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #3F9B6A;
  }

  .el-row {
    margin-bottom: 20px;
  }

  :last-child {
    margin-bottom: 0;
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    /* background: #d3dce6; */
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  /deep/ .bg-purple[data-v-0e3fe4ec] {
    background: #fff;
    height: 50px;
  }

  /deep/ .el-form--label-top .el-form-item__label {
    padding: 0;
  }

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

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

  .pagination {
    text-align: right;
    line-height: 20px;
  }

  /deep/ .el-pagination__total {
    margin-top: 4px;
  }

  /deep/ .btn-prev {
    position: absolute;
    top: 4px;
    right: 69px;
  }

  /deep/ .el-pager {
    position: absolute;
    top: 4px;
    right: 40px;
  }

  /deep/ .btn-next {
    position: absolute;
    top: 4px;
    right: 10px;
  }

  /deep/ .dialog_css {
    margin-top: 11vh;
    margin-left: 13%;
    padding: 0px;

    .el-dialog__title {
      font-size: 12px;
    }
  }

  /deep/.el-dialog__body {
    padding: 0px;
  }

  /deep/ .el-dialog__header {
    background-color: #fff;
  }

  /deep/.el-dialog__title {
    color: #000;
  }

  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  /deep/ .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 108px;
    height: 108px;
    line-height: 108px;
    /*text-align: center;*/
  }

  .avatar {
    width: 108px;
    height: 108px;
    display: block;
  }

  ::v-deep .el-tabs__item.is-active {
    color: #3F9B6A;
    opacity: 1;
  }

  /deep/ .el-tabs__nav-wrap::after {
    background-color: #fff;
  }

  ::v-deep .el-tabs__item:hover {
    color: #3F9B6A;
    cursor: pointer;
    opacity: 1;
  }

  /deep/ .el-tabs__active-bar {
    background-color: #389865;
  }

  /deep/ .el-table_2_column_13 {
    font-weight: 100;
  }

  ::v-deep .el-input__inner:focus {
    border: #3F9B6A 1px solid;
  }

  ::v-deep .el-input__inner:hover {
    border: #3F9B6A 1px solid;
  }

  ::v-deep .el-select .el-input.is-focus .el-input__inner {
    border-color: #3F9B6A
  }


  /* ::v-deep .el-steps .el-step__head.is-wait {
  background-color: red; /* 修改为你想要的颜色 */

  /* 修改未进行步骤的描述文字颜色 */
  ::v-deep .el-steps .el-step__description.is-wait {
    color: #999;
    /* 修改为你想要的颜色 */
  }

  /* 修改未进行步骤的图标颜色 */
  ::v-deep .el-steps .el-step__icon.is-text.is-wait {
    color: #999;
    /* 修改为你想要的颜色 */
  }

  /* 修改未进行步骤的边框色 */
  ::v-deep .el-steps .el-step__line.is-wait {
    border-color: #eee;
    /* 修改为你想要的颜色 */
  }

  ::v-deep .el-steps .is-process .el-step__line {
    background-color: #3F9B6A;
    /* 修改线的颜色 */
  }

  ::v-deep .el-steps .is-process .el-step__title {
    color: #fe7b6a;
    /* 修改进行中步骤的标题颜色 */
  }

  ::v-deep .el-steps .is-process .el-step__icon {
    color: #fff;
    /* 修改进行中步骤的图标颜色 */
    background: #3F9B6A;
    /* 修改进行中步骤图标的边框颜色 */
    border: 0px;
  }

  ::v-deep .el-step__icon-inner {
    line-height: 0
  }

  /* 线条长度 */
  ::v-deep .el-step.is-vertical .el-step__line {
    top: 30px;
    height: 60px;
  }

  ::v-deep .el-date-editor .el-range-separator {
    line-height: 24px;
  }
</style>
<style lang="scss" scoped>
  ::v-deep .xinFrom {
    padding-top: 20px;

    .el-input--mini .el-input__inner {
      height: 36px;
      line-height: 36px;
    }

    .el-range-editor--mini.el-input__inner {
      height: 36px;
      width: 100%;
    }
  }

  ::v-deep .buttonHover:hover {
    color: #3f9b6a !important;
    border-color: #c5e1d2 !important;
    background-color: #ecf5f0 !important;
    outline: none;
  }

  ::v-deep .formSearch {
    margin-top: 30px;
    display: flex;
    width: 100%;
    font-size: 14px;
    justify-content: space-between;
    padding-bottom: 10px;
    align-items: center;

    .el-input__icon el-range__icon el-icon-time {
      line-height: 26px;
    }
  }

  ::v-deep .el-radio-group {
    padding-top: 14px;
  }

  ::v-deep .el-radio {
    font-weight: 100 !important;
  }
</style>
