<template>
  <el-dialog :title="steat == false?'详情':'编辑'" :visible.sync="showBian" custom-class='XDD_css' style="padding: 0;" width="65%" center
      :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
      <div style="padding:15px 10px 10px 10px;background-color:#fff">
     <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="请输入" :disabled="steat == false?true:false" maxlength="100"/>
              </el-form-item>
              <el-form-item label="规划方案" class="grid-content bg-purple device-from" prop="planningScheme">
                <el-select v-model="ruleForm.planningScheme"  style="width: 100%" :disabled="steat == false?true:false">
                  <el-option :label="item.planningName" :value="item.id" v-for="(item,index) in guihuaDate "></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" :height="200" v-if="steat"></wang-editor>
                <div style="border: 1px solid #dddfe5;padding:20px;" v-html="ruleForm.investmentPolicy" v-if="steat == false"></div>
              </el-form-item>
              <el-form-item label="方案概述" prop="summary" class="grid-content bg-purple">
                <wang-editor v-model="ruleForm.summary"  v-if="steat"  ref="editor" :height="200"></wang-editor>
                <div style="border: 1px solid #dddfe5;padding:20px;" v-html="ruleForm.summary" v-if="steat == false"></div>
              </el-form-item>
                <el-form-item label="财务分析与投资回报" prop="financialAnalysis" class="grid-content bg-purple">
                  <wang-editor v-model="ruleForm.financialAnalysis" v-if="steat"  ref="editor" :height="200"></wang-editor>
                  <div style="border: 1px solid #dddfe5;padding:20px;" v-html="ruleForm.financialAnalysis" v-if="steat == false"></div>
                </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><span style="color:red;margin-right:3px;">*</span>招商资源管理</div>
            <!-- <div style="color: #2d8a58;margin-left: 10px;" @click="addziyuan" v-if="steat">
              添加
            </div> -->
          </div>
          <div style="padding: 15px;">
            <div style="padding: 0px 20px 0px 0px">
              <el-table :data="ruleForm.cereResourceStrategy"
                :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="资源名称" width="auto" min-width="15%">
<template slot-scope="scope">
                                  {{scope.row.resources.shopIds[0]?scope.row.resources.shopIds[0].shopName:scope.row.resources.siteIds[0]?scope.row.resources.siteIds[0].venueName:scope.row.resources.advIds[0].advertisingName}}
                                </template>
                </el-table-column>
                <el-table-column label="资源类型" width="auto" min-width="15%">
                  <template slot-scope="scope">
                   {{scope.row.resources.shopIds[0]?'商铺':scope.row.resources.siteIds[0]?'场地':'广告位'}}
                  </template>
                </el-table-column>
                <el-table-column prop="notes" label="策略描述" width="auto" min-width="15%">

                  <template slot-scope="scope">
                   {{'租金:'+scope.row.resources.cereRentalPolicies.rentalPrice || 0}}
                  </template>
                </el-table-column>
                <el-table-column  label="策略名称" width="auto" min-width="15%">
                  <template slot-scope="scope">
                                  {{scope.row.resources.cereRentalPolicies.policyName}}
                                </template>
                </el-table-column>
                <!-- <el-table-column label="操作" width="auto" min-width="18%" v-if="steat">
                  <template slot-scope="scope">
                    <div @click="ceSel(scope.$index)" class="tableBtn greens">策略选择</div>

                    <div @click="MingDelete(scope.row.id,scope.$index)" class="tableBtn greens">删除</div>
                  </template>
                </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="steat">
                    <el-button style="background-color: #fff;color: #3F9B6A;border: 1px solid #dcdfe6;"  class="buttonHover" v-if="fileData.length ==0">+点击上传</el-button>
                  </el-upload>

<a style="padding:10px 0;line-height:20px;color:#3F9B6A" class="tableBtn greens"   v-if="steat == false && ruleForm.attachmentInfo" :href="ruleForm.attachmentInfo.url" target="_blank" download>{{ruleForm.attachmentInfo.name}}</a>

            </el-form-item>
            <el-form-item label="审核状态">

            <div style="line-height:40px;" >
              {{ruleForm.auditStatus =='1'?'待审核':ruleForm.auditStatus =='2'?'审核通过':ruleForm.auditStatus =='3'?'已驳回':''}}
            </div>

                    </el-form-item>
         </el-form>
        <div style="display: flex;justify-content: flex-end;padding: 10px 20px 10px 0">
          <el-button  @click="close" class="buttonHover"
              style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取消
          </el-button>
          <!-- <el-button  @click="onSubmit" style="background-color: #3F9B6A;color: #fff;" v-if="steat==false">编辑
          </el-button> -->
          <el-button  @click="onSubmit" style="background-color: #3F9B6A;color: #fff;" v-if="steat">确定
          </el-button>
        </div>
      </div>
      <el-dialog title="添加" :visible.sync="addMing" 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: 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 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="tableData"
                @selection-change="handleSelectionChange" tooltip-effect="dark"
                  :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
                   style="width: 100%">
                 <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>
        <div style="display: flex;justify-content: flex-end;padding: 10px 20px 10px 0">
          <el-button  @click="mingClose()" class="buttonHover"
              style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取消
          </el-button>
          <el-button  @click="minSev" style="background-color: #3F9B6A;color: #fff;">确定
          </el-button>

        </div>
      </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
                    @current-change="celueChenge"
                tooltip-effect="dark"
                  :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>
              </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>
</template>

<script>
  import {
    fangGetAll,
    fangGetId,
    fangAdd,
    fangEdit,
    fangDel,
  }from '../../../api/fangli'
  import {
   contractGetAll
  } from '../../../api/planningBz.js'
  import {
    getAlls as map1
  } from '../../../api/map1'
  import {
   ceGetAll
  } from '../../../api/sam.js'
  import {
   getAlls,
   changAlls
  } from '../../../api/information.js'
  import {
   duiyingAll,
   duiyingAdd
  } from '../../../api/newZiyuan.js'
  // import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
  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: {
      showBian: {
        type: Boolean,
        default: false
      },
      steat: {
        type: Boolean,
        default: false
      },
      list: {
        type: Object,
        default: function() {
          return {}; // 返回一个空数组作为默认值
        },
      }
    },
    components: {
      wangEditor,
      upimg
    },
    data() {
      return {
        uploadFileUrl: uploadUrl, // 请求地址
        isLoading: false,
        editTrue: false,
        addMing: false,
        input: "",
        ruleForm: {},
        MingID: [],
        time: '',
        tableData: [],
        fileData: [],
        currentTime: '',
        ActiveName: 0,
multipleSelection:[],
guihuaDate:[],
  pageindex: {
          pageNumber: 1,
          pageSize: 10,
        },
        index:0,
        celueMing:false,
       celueSel:null,
       celueData:[],
       index:null,
       rules: {
         planName: [{
           required: true,
           message: '请输入方案名称',
           trigger: 'blur'
         }],
       },
       fanganPage:{
           reviewStatus:'2',
           pageNumber: 1,
           pageSize: 10,

       }
      }
    },
    watch: {
          'list': {
              handler(newValue) {
                this.fileData=[]
                // 当 list 发生变化时，更新 secondData
                this.ruleForm = { ...newValue };
                console.log(newValue)
// console.log(this.ruleForm)
                // if(this.ruleForm.resourceManagement != ''){
                //   this.ruleForm.resourceManagement = JSON.parse(this.ruleForm.resourceManagement)
                // }
              if ( this.ruleForm.attachmentInfo != '' && typeof this.ruleForm.attachmentInfo === 'string') {
                  this.ruleForm.attachmentInfo = JSON.parse(this.ruleForm.attachmentInfo)
                  this.fileData.push(this.ruleForm.attachmentInfo)
              }

              },
              // immediate: false // 立即执行一次处理函数
            }
      },
    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');

        this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      },
     async getAll() {
        const res = await contractGetAll(this.fanganPage)
        this.guihuaDate = res.data.content
        const celue = await ceGetAll(this.pageindex)
         this.celueData = celue.data.content
      },
      //上传
      submitUpload() {
        this.$refs.upload.submit();
      },
      handleUploadSuccess(response, file, fileList) {

      const fileMsg = {
       name:file.name,
        url: response.data.url,
     }
      // 将文件地址存储在 uploadedFiles 数组中
      this.fileData.push(fileMsg);

      },
      handleRemove(file, fileList) {
           this.fileData = []
      },
      handlePreview(file) {

      },
      fileDelete(val) {
        this.fileData.splice(val, 1);
      },
      //保存
      onSubmit() {

        if(this.fileData.length !=0){
                     this.ruleForm.attachmentInfo = JSON.stringify(this.fileData[0])
                   }
                   // if(this.ruleForm.resourceManagement.length !=0){
                   //   this.ruleForm.resourceManagement = JSON.stringify(this.ruleForm.resourceManagement)
                   // }

// const { pageNumber, pageSize, ...rest } = this.ruleForm
// this.ruleForm = rest
//   console.log(this.ruleForm)
//   return
// 将剩余的字段存储到this.zhong对象中

        fangEdit(this.ruleForm).then(res=>{
          this.$message({
            message: '保存成功',
            type: 'success'
          })
              this.$emit('bianClose', false)
        })

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

      },
      close() {
        this.$emit('bianClose', false);
        // this.$refs.editor.html = '<p><br></p>'
        // this.ruleForm = {}
      },
      MingEd(item) {

      },
      minSev() {
 this.tableData = this.multipleSelection
        this.addMing = false
        this.multipleSelection =[]


      },
      MingDelete(items,index) {

        let arr = []
                 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') {

                              if(typeof this.ruleForm.resourceManagement =='string'){
                               arr =  this.ruleForm.resourceManagement.split(",")
                              }
                              arr = arr.filter(item => item !== items);

                             this.ruleForm.resourceManagement = arr.join(',')

                             this.ruleForm.cereResourceStrategy.splice(index,1);
                                done();
                             } else {
                               done();
                             }
               }
               })



      },
      fenleiChange(value){
          this.ruleForm.classificationCode = value[value.length - 1]
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      mingClose(){
           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.ruleForm.resourceManagement[this.index], 'ceid', this.celueSel.id);
          this.$set(this.ruleForm.resourceManagement[this.index], 'policyName', this.celueSel.policyName);
          this.celueMing = false
          this.celueSel =null
          this.index = null

      },
      celueChenge(val){
        this.celueSel = val;
      },
     async addziyuan(){
    const ziyuan =  await getAlls(this.pageindex)
     const ggw  = await map1(this.pageindex)
     const changdi = await changAlls(this.pageindex)
    this.tableData = [...ziyuan.data.content,...ggw.data.content,...changdi.data.content]
        this.addMing = true

      }
    }
  }
</script>

<style lang="scss" scoped>
  .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;
  }

</style>
