<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" 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/>
              </el-form-item>
              <el-form-item label="规划方案" class="grid-content bg-purple device-from" prop="planningType">
                <el-select v-model="ruleForm.planningScheme"  style="width: 100%" disabled>
                  <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">

                <div style="border: 1px solid #dddfe5;padding:20px;" v-html="ruleForm.investmentPolicy" ></div>
              </el-form-item>
              <el-form-item label="方案概述" prop="summary" class="grid-content bg-purple">

                <div style="border: 1px solid #dddfe5;padding:20px;" v-html="ruleForm.summary" ></div>
              </el-form-item>
                <el-form-item label="财务分析与投资回报" prop="financialAnalysis" class="grid-content bg-purple">

                  <div style="border: 1px solid #dddfe5;padding:20px;" v-html="ruleForm.financialAnalysis" ></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>招商内容</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%">
                              </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>
            </div>
          </div>
        </div>
            <el-form-item label="附件信息" prop="mainPurpose" class="grid-content bg-purple">
              <div style="padding:10px 0;line-height:20px;color:#3F9B6A" v-if="steat == false && ruleForm.attachmentInfo">{{ruleForm.attachmentInfo.name}}<a style="margin-left:20px;color:#3F9B6A" :href="ruleForm.attachmentInfo.url" target="_blank" v-if="ruleForm.attachmentInfo.name">下载</a></div>
  <!-- <el-upload class="upload-demo" ref="upload" :on-preview="handlePreview" :on-remove="handleRemove"
                    :action="uploadFileUrl" :on-success="handleUploadSuccess" :file-list="fileData"
                    :show-file-list="false">
                    <div style="color: #2d8a58;margin-left: 10px;" slot="trigger">
                      上传附件
                    </div>
                  </el-upload> -->

            </el-form-item>
<el-form-item label="状态" prop="mainPurpose" class="grid-content bg-purple" v-if="steat">
           <el-radio-group v-model="radio">
              <el-radio :label="3">通过</el-radio>
              <el-radio :label="6">不通过</el-radio>
            </el-radio-group>
            </el-form-item>
            <el-form-item label="审核意见" prop="mainPurpose" class="grid-content bg-purple" v-if="steat">
                      <el-input v-model="ruleForm.planName" placeholder="请输入" type="textarea"
  :rows="4"/>
                        </el-form-item>
         </el-form>
         <!-- <div  v-if="steat==false">
           <div style="width:129px;font-weight: 100;
    font-size: 14px;
    color: #000000e6;text-align:right">审核信息</div>
           <div style="padding:20px 30px 20px 20px;">
             <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="detailLtemName" 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>
           </div>
         </div> -->
        <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">确定
          </el-button>
        </div>
      </div>

    </el-dialog>
</template>

<script>
  import {
    add,
    edit,
    deleteById,
    MingAdd,
    mingTable,
    Mingdan,
    MingEdit,
    MingDel,
    fujiaAdd,
    imgUp
  } from '../../../api/activityBz'
  // import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
  import wangEditor from "@/components/editor/index";
  import upimg from "@/components/ImageUpload/index"
  import {
   contractGetAll
  } from '../../../api/planningBz.js'
  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 {
        input: "",
        ruleForm: {},
        tableData: [],
        fileData: [],
        dataList: [],
        currentTime: '',
multipleSelection:[],
radio:3,
guihuaDate:[],
  pageindex: {
          pageNumber: 1,
          pageSize: 10,
        },
      }
    },
    watch: {
          'list': {
              handler(newValue) {
                // 当 list 发生变化时，更新 secondData
                this.ruleForm = { ...newValue };
                console.log(this.ruleForm)
            if ( this.ruleForm.attachmentInfo != '') {
                // this.ruleForm.attachmentInfo = JSON.parse(this.ruleForm.attachmentInfo)
                this.fileData.push(this.ruleForm.attachmentInfo)
            }
            // if(this.ruleForm.resourceManagement !=''){
            //   this.ruleForm.resourceManagement = JSON.parse(this.ruleForm.resourceManagement)
            // }

              },
              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.pageindex)
        this.guihuaDate = res.data.content
      },
      //上传
      submitUpload() {
        this.$refs.upload.submit();
      },
      handleUploadSuccess(response, file, fileList) {
        this.dataList.push(file)
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      fileDelete(val) {
        this.dataList.splice(val, 1);
      },

      //保存
      onSubmit() {

      },
      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) {

      },

      MingDelete(item) {
        this.tableData.splice(item, 1);
      },
      fenleiChange(value){
          this.ruleForm.classificationCode = value[value.length - 1]
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    }
  }
</script>

<style lang="scss" scoped>
  ::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 .el-radio-group{
  margin-top:0px !important;

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