<template>
<div class="zhuti" v-if="showAdd">
            <div style="height:58px;line-height:58px;">
              <div style="color:#0006"> <span>招商方案管理</span> <span style="padding:0 5px;">></span> <span
                  style="color:#000000e6">新增</span></div>
            </div>
            <div style="margin-top: 30px;">
              <div class="titles">
                基础信息
              </div>
              <div style="padding: 20px 20px 20px 0;">
                <el-form label-position="right" ref="jibenFrom" :model="ruleForm" :rules="rules" label-width="140px"
                  style="position: relative">
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item label="招商方案名称" class="grid-content bg-purple device-from" prop="planName">
                        <el-input v-model="ruleForm.planName" placeholder="请输入" maxlength="100"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="规划方案" class="grid-content bg-purple device-from" prop="planningScheme">
                        <el-select v-model="ruleForm.planningScheme" placeholder="请选择"  style="width: 100%">
                          <el-option :label="item.planningName" :value="item.id" v-for="(item,index) in guihuaDate "></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>

                  </el-row>


                  <el-row :gutter="20">
                    <el-col :span="24">

                      <el-form-item label="招商政策与条件" class="grid-content bg-purple" prop="investmentPolicy">
                        <wang-editor v-model="ruleForm.investmentPolicy" ref="editor" :height="200"></wang-editor>
                      </el-form-item>


                    </el-col>

                  </el-row>

                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="方案概述" prop="summary" class="grid-content bg-purple">
                        <wang-editor v-model="ruleForm.summary" ref="editor" :height="200"></wang-editor>
                      </el-form-item>
                    </el-col>

                  </el-row>

                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="财务分析与投资回报" prop="financialAnalysis" class="grid-content bg-purple">
                        <wang-editor v-model="ruleForm.financialAnalysis" ref="editor" :height="200"></wang-editor>
                      </el-form-item>
                    </el-col>

                  </el-row>

                    <div style="border: 1px solid #E5E5E5;padding: 1px" id="huodong">
                      <div style="padding: 10px 13px;font-size: 14px;border-bottom: 1px solid #E5E5E5;display: flex;justify-content: space-between;">
                        <div><span style="color:red;margin-right:3px;">*</span>招商资源管理</div>
                        <div style="color: #3F9B6A;margin-left: 10px;" @click="mingShow">
                          添加
                        </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="序号" min-width="5%" >
                              <template slot-scope="scope">
                                {{scope.$index + 1}}
                              </template>
                            </el-table-column>
                            <!-- <el-table-column label="资源编号" prop="id" width="100">

                            </el-table-column> -->
                            <el-table-column label="资源名称"  min-width="20%" show-overflow-tooltip>
                            <template slot-scope="scope">
                              {{scope.row.shopName ? scope.row.shopName :  scope.row.advertisingName?scope.row.advertisingName:scope.row.venueName}}
                            </template>
                            </el-table-column>
                            <el-table-column label="资源类型" min-width="10%">
                              <template slot-scope="scope">
                                {{scope.row.shopName ? '商铺' : scope.row.advertisingType?scope.row.advertisingType:'场地'}}
                              </template>
                            </el-table-column>
                            <el-table-column prop="notes" label="策略描述" min-width="25%" show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column prop="policyName" label="策略名称" min-width="25%" show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column label="操作" min-width="15%">
                              <template slot-scope="scope">
                                <div @click="ceSel(scope.$index)" class="tableBtn greens">策略选择</div>
                                <!-- <div @click="MingEd(scope.row)" class="tableBtn greens">编辑</div> -->
                                <div @click="MingDelete(scope.$index)" class="tableBtn greens">删除</div>
                              </template>
                            </el-table-column>
                          </el-table>
                        </div>
                      </div>
                    </div>
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="附件信息" prop="mainPurpose" class="grid-content bg-purple">
                        <el-upload class="upload-demo" ref="upload" :on-preview="handlePreview" :on-remove="handleRemove"
                                          :action="uploadFileUrl" :on-success="handleUploadSuccess" :file-list="fileData"
                                           :auto-upload="true">
                                          <el-button style="background-color: #fff;color: #3F9B6A;border: 1px solid #dcdfe6;"  class="buttonHover" v-if="fileData.length==0">+点击上传</el-button>
                                        </el-upload>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item>
                        <div >
                          <el-button  @click="onSubmit" style="background-color: #3F9B6A;color: #fff;">确定
                          </el-button>
                        <el-button  @click="close" class="buttonHover"
                              style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取消
                        </el-button>

                        </div>

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

                </el-form>
              </div>
            </div>



    <el-dialog :visible.sync="addMing" title="添加" style="padding: 0;" width="65%"
      append-to-body center :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">

      <div style="padding:20px;max-height: calc(100vh - 200px);
      overflow-y: auto;">
        <div style="border: 1px solid #E5E5E5;padding: 1px" id="huodong">
          <div style="padding: 10px 13px;font-size: 14px;border-bottom: 1px solid #E5E5E5;display: flex;justify-content: space-between;">
            <div>选择资源</div>
            <!-- <div style="color: #2d8a58;margin-left: 10px;" @click="addMing = true">
              添加
            </div> -->
          </div>
          <div style="padding: 15px;">
            <div style="padding: 0px 20px 0px 0px">
              <el-table :data="ziyuanData"
              tooltip-effect="dark"
                 @selection-change="handleSelectionChange"
                :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
                >
                 <el-table-column
                        label="选择"
                       type="selection"
                       width="55">
                     </el-table-column>
                <el-table-column label="序号"  min-width="8%" >
                  <template slot-scope="scope">
                    {{scope.$index + 1}}
                  </template>
                </el-table-column>
                <el-table-column label="编号" prop="id" min-width="8%">

                </el-table-column>
                <el-table-column label="资源名称"  min-width="25%">
                <template slot-scope="scope">
                  {{scope.row.shopName ? scope.row.shopName :  scope.row.advertisingName?scope.row.advertisingName:scope.row.venueName}}
                </template>
                </el-table-column>
                <el-table-column label="资源类型" min-width="12%">
                  <template slot-scope="scope">
                    {{scope.row.shopName ? '商铺' : scope.row.advertisingType?scope.row.advertisingType:'场地'}}
                  </template>
                </el-table-column>
                <el-table-column prop="notes" label="对应策略" min-width="15%">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div style="display: flex; justify-content: flex-end; align-items: center;">
          <el-button  @click="minSev" style="background-color: #3F9B6A;color: #fff;">确定
          </el-button>
         <el-button  @click="mingClose" class="buttonHover"
               style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取消
         </el-button>

        </div>
      </template>

    </el-dialog>
    <!-- 策略选择 -->
    <el-dialog :visible.sync="celueMing" custom-class='XDD_css' style="padding: 0;" width="50%"
      append-to-body center :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
      <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;width:100%">
        <div style="border: 1px solid #E5E5E5;padding: 1px" id="huodong">
          <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="celueData"
               highlight-current-row
                ref="myTable"
                  @current-change="celueChenge"
                :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
                >
                <el-table-column label="序号"  min-width="80" >
                  <template slot-scope="scope">
                    {{scope.$index + 1}}
                  </template>
                </el-table-column>
                <el-table-column label="策略名称" prop="policyName" min-width="200" >
                </el-table-column>
                <el-table-column label="适用资源" prop="applicableResources" min-width="100" >
                </el-table-column>
                <el-table-column label="经营类型" prop="businessType" min-width="150">

                </el-table-column>
                <el-table-column label="租金价格" prop="rentalPrice" min-width="150"  >
                </el-table-column>
                <el-table-column label="租期" prop="leaseTerm" min-width="100" >
                </el-table-column>
                <el-table-column label="是否出租" prop="planningObjectives" min-width="100" >
                  <template slot-scope="scope">
                    {{scope.row.isrental == '0'?'否':'是'}}
                       </template>
                </el-table-column>
                <el-table-column label="是否自营" prop="planningObjectives" min-width="100" >
                  <template slot-scope="scope">
                    {{scope.row.isSelfOperated == '0'?'否':'是'}}
                       </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <div style="display: flex;justify-content: flex-end;padding: 10px 20px 10px 0">
        <el-button  @click="ceClose" class="buttonHover"
              style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取消
        </el-button>
        <el-button  @click="ceSev" style="background-color: #3F9B6A;color: #fff;">确定
        </el-button>

      </div>
    </el-dialog>
    <!-- 模板管理 -->
    <el-dialog title="模板管理" :visible.sync="ModeShow" custom-class='bian_css' style="padding: 0;" width="65%"
      center :close-on-click-modal="false"  append-to-body>
      <div style="padding:20px;">
        <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="招商方案名称" min-width="25%">
                  </el-table-column>
                  <el-table-column label="创建时间"  min-width="25%">
                  </el-table-column>
                  <el-table-column label="操作"  min-width="25%" >
                    <template slot-scope="scope">
                      <div @click="modeXian(scope.row)" class="tableBtn greens">选择模板</div>
                      <div @click="modeXian(scope.row)" class="tableBtn greens">查看</div>
                      <!-- <div @click="addM(2,scope.row)" class="tableBtn greens">编辑</div> -->
                      <div @click="" class="tableBtn greens">删除</div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
      </div>
              <el-dialog title="查看" :visible.sync="modeMing" custom-class='bian_css' style="padding: 0;" width="65%"
                center :close-on-click-modal="false"  append-to-body>
                <div style="padding:20px;">
                    <el-form label-position="right" ref="jibenFrom" :model="ruleForm" :rules="rules" label-width="140px"
                            style="position: relative">
                                <el-form-item label="招商方案名称" class="grid-content bg-purple device-from" prop="planName">
                                  <el-input v-model="ruleForm.planName" placeholder="请输入" />
                                </el-form-item>
                                <el-form-item label="规划方案" class="grid-content bg-purple device-from" prop="planningScheme">
                                  <el-select v-model="ruleForm.planningScheme" placeholder="请选择"  style="width: 100%">
                                    <el-option label="活动策划" value="活动策划"></el-option>
                                  </el-select>
                                </el-form-item>

                                <el-form-item label="招商政策与条件" class="grid-content bg-purple" prop="investmentPolicy">
                                  <wang-editor v-model="ruleForm.investmentPolicy" ref="editor"></wang-editor>
                                </el-form-item>
                                <el-form-item label="方案概述" prop="summary" class="grid-content bg-purple">
                                  <wang-editor v-model="ruleForm.summary" ref="editor"></wang-editor>
                                </el-form-item>
                                  <el-form-item label="财务分析与投资回报" prop="financialAnalysis" class="grid-content bg-purple">
                                    <wang-editor v-model="ruleForm.financialAnalysis" ref="editor"></wang-editor>
                                  </el-form-item>
                          <div style="border: 1px solid #E5E5E5;padding: 1px" id="huodong">
                            <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'}"
                                   style="width: 100%">
                                  <el-table-column label="序号" width="auto" min-width="8%" >
                                    <template slot-scope="scope">
                                      {{scope.$index + 1}}
                                    </template>
                                  </el-table-column>
                                  <el-table-column label="资源编号" prop="id" width="auto" min-width="22%">

                                  </el-table-column>
                                  <el-table-column label="资源名称" prop="estimatedQuantity" width="auto" min-width="15%">

                                  </el-table-column>
                                  <el-table-column label="资源类型" prop="estimatedCost" width="auto" min-width="15%">
                                  </el-table-column>
                                  <el-table-column prop="notes" label="策略描述" width="auto" min-width="15%">
                                  </el-table-column>
                                  <el-table-column prop="notes" label="策略名称" width="auto" min-width="15%">
                                  </el-table-column>

                                </el-table>
                              </div>
                            </div>
                          </div>
                              <el-form-item label="附件信息" prop="mainPurpose" class="grid-content bg-purple">
                    <el-upload class="upload-demo" ref="upload" :on-preview="handlePreview" :on-remove="handleRemove"
                                      :action="uploadFileUrl" :on-success="handleUploadSuccess" :file-list="fileData"
                                       :auto-upload="true" v-if="fileData.length==0">
                                      <el-button style="background-color: #fff;color: #3F9B6A;border: 1px solid #dcdfe6;"  class="buttonHover" v-if="fileData.length==0">+点击上传</el-button>
                                    </el-upload>
                              </el-form-item>
                           </el-form>
                    <div style="display: flex;justify-content: flex-end;margin-top:20px;">
                      <el-button @click="modeMing = false"  style="background-color: #fff;color: #000;border: 1px solid #B1B1B1;" class="buttonHover">取 消</el-button>


                    </div>
                </div>

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

     </div>

</template>

<script>
  import {
    fangGetAll,
    fangGetId,
    fangAdd,
    fangEdit,
    fangDel,
  }from '../../../api/fangli';
  import {
   contractGetAll
  } from '../../../api/planningBz.js'
  import {
   getAlls,
   changAlls
  } from '../../../api/information.js'
  import {
    getAlls as map1
  } from '../../../api/map1'
  import {
   ceGetAll
  } from '../../../api/sam.js'
  import {
   duiyingAll,
   duiyingAdd
  } from '../../../api/newZiyuan.js'
  import wangEditor from "@/components/editor/index";
  import upimg from "@/components/ImageUpload/index"
  import {
    uploadUrl
  } from '@/utils/request'
  import html2canvas from 'html2canvas'
  import jsPDF from 'jspdf'
  export default {
    props: {
      showAdd: {
        type: Boolean,
        default: false
      },
      fenleiName: {
        type: Array,
        default: function() {
          return []; // 返回一个空数组作为默认值
        },
      }
    },
    name: 'activityBz',
    components: {
      wangEditor,
      upimg
    },
    data() {
      return {
        uploadFileUrl: uploadUrl, // 请求地址
        isLoading: false,
        editTrue: false,
        addMing: false,
        celueMing:false,
        input: "",
        ruleForm: {
        planName:'',
        planningScheme:'',
        investmentPolicy:'',
        summary:'',
        financialAnalysis:'',
        attachmentInfo:'',
        resourceManagement:'',
        auditStatus:'1'
        },
        guihuaDate:[],
        rules: {
          planName: [{
            required: true,
            message: '请输入方案名称',
            trigger: 'blur'
          }],
        },
        tableData: [],
        fileData: [],
        ModeShow:false,//导入模板框
        modeMing:false,//导入模板详情
multipleSelection:[],
  pageindex: {
          pageNumber: 1,
          pageSize: 10,
        },
        ziyuanData:[],
        celueSel:null,
        celueData:[],
        index:null,
        newAdd:{
          resourcesId:'',//资源ID
          rentalPoliciesId:'',//策略ID
        }
      }
    },
    created() {


    },
    mounted() {
      this.editTrue = true
      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 contractGetAll(this.pageindex)
        this.guihuaDate = res.data.content

        const celue = await ceGetAll(this.pageindex)
         this.celueData = celue.data.content
      },
     async mingShow(){
        const ziyuan =  await getAlls(this.pageindex)
         const ggw  = await map1(this.pageindex)
         const changdi = await changAlls(this.pageindex)
        this.ziyuanData = [...ziyuan.data.content,...ggw.data.content,...changdi.data.content]
        this.addMing = true
      },

      //上传
      submitUpload() {
        this.$refs.upload.submit();
      },
      handleUploadSuccess(response, file, fileList) {
        const fileMsg = {
          name:file.name,
           url: file.response.data.url,
        }
        // 将文件地址存储在 uploadedFiles 数组中
        this.fileData.push(fileMsg);
      },
      handleRemove(file, fileList) {
        this.fileData = []
      },
      handlePreview(file) {
        console.log(file);
      },
      fileDelete(val) {
        this.fileData.splice(val, 1);
      },
      //保存
      onSubmit() {
        this.$refs.jibenFrom.validate((valid) => {
                let Ids=[]
        if (valid) {
          this.ruleForm.createDate = this.updateCurrentTime();
          if (this.fileData.length !== 0) {
            this.ruleForm.attachmentInfo = JSON.stringify(this.fileData[0]);
          }
          if (this.tableData.length !== 0) {
            let promises = this.tableData.map((item) => {
              let qianzui = '';
              if (item.advertisingName) {
                qianzui = 'gg';
              } else if (item.shopName) {
                qianzui = 'sp';
              } else if (item.venueName) {
                qianzui = 'cd';
              }
              let obj = {
                resourcesId: `${qianzui}${item.id}`, // 资源ID
                rentalPoliciesId: item.ceid, // 策略ID
              };
              return duiyingAdd(obj).then((res) => {
                Ids.push(res.data.id);
              });
            });

            Promise.all(promises).then(() => {
              this.ruleForm.resourceManagement = Ids.join(',');
              fangAdd(this.ruleForm).then((res) => {
                this.$message({
                  message: '保存成功',
                  type: 'success'
                });
                this.ruleForm = {
                  planName: '',
                  planningScheme: '',
                  investmentPolicy: '',
                  summary: '',
                  financialAnalysis: '',
                  attachmentInfo: '',
                  resourceManagement: '',
                  auditStatus: '1'
                };
                this.tableData = [];
                this.fileData = [];
                this.$emit('childClose', false);
              }).catch((err) => {
                console.log(err);
              });
            }).catch((err) => {
              console.log(err);
            });
          } else {
          this.$message({
            message: '请填写完整信息',
            type: 'error'
          })
            return false;
          }
        }else {
          this.$message({
            message: '请填写完整信息',
            type: 'error'
          })
            return false;
          }

        })
      },
      dateFormat() {
        this.ruleForm.eventStartTime = this.ruleForm.plan_Time[0]
        this.ruleForm.eventEndTime = this.ruleForm.plan_Time[1]

      },
      close() {
        this.$emit('childClose', false);
        this.$refs.editor.html = '<p><br></p>'
        this.multipleSelection=[]
        this.ruleForm = {
                 planName:'',
                 planningScheme:'',
                 investmentPolicy:'',
                 summary:'',
                 financialAnalysis:'',
                 attachmentInfo:'',
                 resourceManagement:'',
                 auditStatus:'1'
               }
      },
      MingEd(item) {

      },
      minSev() {
        this.tableData = this.multipleSelection
        this.addMing = false
        this.multipleSelection =[]
      },
      MingDelete(item) {
        this.tableData.splice(item, 1);
      },
      fenleiChange(value){
          this.ruleForm.classificationCode = value[value.length - 1]
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      celueChenge(val){
        this.celueSel = val;

      },
      modeXian(){
        this.modeMing = true
      },
      Modes(){
        this.ModeShow = true
      },
      mingClose(){
        this.multipleSelection =[]
        this.ziyuanData =[]
        this.addMing = false

      },
      ceSel(val){
        this.index = val
        this.celueMing = true
      },
      ceClose(){
         this.celueMing = false
         this.celueSel=null
         this.index = null

      },
      ceSev(){

          this.$set(this.tableData[this.index], 'ceid', this.celueSel.id);
          this.$set(this.tableData[this.index], 'policyName', this.celueSel.policyName);
          this.celueMing = false
          this.celueSel =null
          this.index = null
          this.$refs.myTable.setCurrentRow(null)
      },
      seveMode(){

      }
    }
  }
</script>

<style lang="scss" scoped>
  .zhuti {
    padding: 0 20px 20px 20px;
    min-height: calc(100vh - 50px - 20px);
    background-color: #Fff;

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

  .greens {
    color: #3f9b6a;
  }

  ::v-deep .XDD_css {
    margin-top: 10vh;
    margin-left: 20%;
 max-height:550px;
 overflow-y: auto; /* 当内容超出容器高度时，显示垂直滚动条 */
    .el-dialog__body {
      padding: 0px;
      background-color: #fff;
    }

    .el-dialog__header {
      background-color: #fff;
      padding: 10px 20px 10px 20px;
      border-bottom: 1px solid #EFEFEF;
    }

    .el-dialog__title {
      font-size: 14px;
      color: #000000e6;
    }
  }

  ::v-deep .el-tabs--border-card {
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;

    .el-tabs__content {
      border: 1px solid #E4E7ED;
      padding: 0;
    }

    .el-tabs__header {
      background-color: #fff;
      border-bottom: none;
    }

    .el-tabs__content {
      border: none;
    }

    .el-tabs__header .el-tabs__item {
      border: none;
      margin-right: 10px;
      background-color: #F2F2F2;
      font-size: 14px;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      padding: 0 15px;
    }

    .el-tabs__header .el-tabs__item.is-active {
      color: #fff;
      background-color: #3F9B6A;
    }

    .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
      color: #3F9B6A;
    }
  }

  ::v-deep .el-date-table td.end-date span,
  .el-date-table td.start-date span {
    background-color: #3F9B6A;
  }

  ::v-deep .el-date-table td.available:hover {
    color: #3F9B6A;
  }

  ::v-deep .el-button.is-:focus,
  .el-button.is-:hover {
    border-color: fff;
    color: #3F9B6A;
  }
 ::v-deep .buttonHover:hover {
    color: #3f9b6a !important;
    border-color: #c5e1d2 !important;
    background-color: #ecf5f0 !important;
    outline: none;
  }
 ::v-deep  .XDD_css {
  .el-dialog__header{
    padding:0px;
    border-bottom :0px;
  }
}
</style>
