<template>
 <div style="background-color:#f7f7f7;padding:10px 10px;">
     <div class="zhuti">
       <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 class="formSearch">
           <el-form :inline="true" :model="formSel">
             <el-form-item label="年月">
<el-date-picker style="width: 100%;" v-model="formSel.yytime" value-format="yyyy-MM"
                    type="month"  placeholder="选择日期">
                  </el-date-picker>
             </el-form-item>


           </el-form>
      <div style="width: 17%;">
             <el-button
               style="background-color: #3F9B6A;color: #fff"
               @click="onSubmit"
               >查询
             </el-button>
             <el-button
              class="buttonHover"
                style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
               @click="resetting"
               >重置
             </el-button>
           </div>

         </div>
        <div style="margin-bottom:20px;">
          <el-button style="background-color: #3F9B6A;color: #fff;padding:8px 15px;" icon="el-icon-circle-plus-outline"
            @click="genad">新增</el-button>
        </div>
        <div>
         <el-calendar v-model="morenCard">
            <template
                slot="dateCell"
                slot-scope="{date, data}">
                {{data.day.split("-").slice(2).join("-")}}
              <div style="overflow: auto;height:55px;">
                <div style="width:100%" v-for="(item,index) in tableData" @click="genjinMsg(item)">
                  <div style="font-size:12px;margin-top:10px;width:48%" >
                        {{item.negotiationTime == data.day?item.negotiationResult:''}}
                  </div>
                  </div>
              </div>
              </template>
         </el-calendar>
        </div>
        <div>
          <el-button
           class="buttonHover"
             style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
            @click="closeGenjin"
            >返回
          </el-button>
        </div>
  </div>
  <el-dialog :title="msgEit?'查看':'新增'" :visible.sync="ggXin"  width="75%"
        append-to-body  :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
        <div style="padding: 20px;">
          <el-form ref="tanform" :model="formInline"  :rules="rulesOne" label-width="120px">
            <el-form-item label="谈判时间" prop="negotiationTime">
              <el-date-picker
              :disabled="msgEit"
                    v-model="formInline.negotiationTime"
                     type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                    tyle="width: 100%;">
                  </el-date-picker>
            </el-form-item>
            <el-form-item label="谈判主题" prop="negotiationTheme" tyle="width: 100%;">
              <el-input v-model="formInline.negotiationTheme"  :disabled="msgEit"></el-input>
            </el-form-item>
            <el-form-item label="标段号" prop="bidSegmentNumber" tyle="width: 100%;">
              <el-input v-model="formInline.bidSegmentNumber"  :disabled="msgEit"></el-input>
            </el-form-item>

          <el-form-item label="会议纪要" prop="meetingMinutes">
            <el-input type="textarea" v-model="formInline.meetingMinutes" :rows="4"  :disabled="msgEit"></el-input>
          </el-form-item>
          <el-form-item label="谈判内容" prop="negotiationContent">
            <el-input type="textarea" v-model="formInline.negotiationContent" :rows="4"  :disabled="msgEit"></el-input>
          </el-form-item>
          <el-form-item label="谈判结果" prop="negotiationResult">
            <el-input type="textarea" v-model="formInline.negotiationResult" :rows="4"  :disabled="msgEit"></el-input>
          </el-form-item>
          <el-form-item label="当前阶段" prop="currentStage">
            <el-select v-model="formInline.currentStage" placeholder="请选择" style="width:100%"  :disabled="msgEit">
              <el-option label="继续跟进" value="继续跟进" />
              <el-option label="达成共识" value="达成共识" />
            </el-select>
          </el-form-item>
          <el-form-item label="其他附件" prop="otherAttachments">
            <upfile filePath="yixiang" inputtype="otherAttachments" :value="formInline.otherAttachments" v-if="msgEit==false"  accept=".docx" @changimg="e=>changimg(e,'otherAttachments')"></upfile>
            <div class="duiqi greens" v-if="msgEit" @click="formInline.otherAttachments?openfile(formInline.otherAttachments):''">{{formInline.otherAttachments?'查看详情':'暂无文件'}}</div>
          </el-form-item>
          <el-form-item label="现场照片" >
            <div v-if="msgEit" style="display:flex;flex-wrap: wrap">
              <el-image
                    style="width: 100px; height: 100px;margin-right: 10px;"
                      fit="fill"
                    :src="$baseURL+item"
                     v-for="(item,index) in imgList" :key="index"
                    >
                     <div slot="error" class="image-slot">
                          </div>
                          </el-image>
            </div>
            <upimg filePath="yixiang" inputtype="onSitePhotos" :value="formInline.onSitePhotos"
              @changimg="e=>changimg(e,'onSitePhotos')" :limit="3" v-if="msgEit==false" ></upimg>

          </el-form-item>
          <el-form-item label="下次谈判时间" prop="plan_Time">
            <el-date-picker style="width: 100%;" v-model="formInline.plan_Time" value-format="yyyy-MM-dd"
            :disabled="msgEit"
               type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" @change="changeNext">
            </el-date-picker>
          </el-form-item>
        </el-form>
           </div>
        <div style="display: flex;justify-content: flex-end;">
          <el-button @click="closeFn" class="buttonHover"
            style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
          <el-button @click="addCheck" style="background-color: #3F9B6A;color: #fff" v-if="msgEit==false">确定</el-button>
        </div>
      </el-dialog>
   </div>
</template>

<script>
  import {
   tanGetAll,
   tanAdd,
   tanEdit,
   tanDel,
  } from '../../../api/inr.js'
  import upimg from "@/components/ImageUpload/index"
  import upfile from "@/components/fujianUpload/fujianList"
  import {
   getAlls
  } from '../../../api/information.js'
  import {
    getAlls as map1
  } from '../../../api/map1'
  export default {
    components: {
      upimg,
      upfile
    },
     props: {
       message: {
         type: Number, // 指定数据的类型
         required: true, // 指定该数据是必需的
         default: null ,// 指定默认值
         }
       } ,
    data() {
      return {
        formSel:{
        yytime:''
        },
        formInline:{
          negotiationTime:'',
        negotiationTheme:'',
        bidSegmentNumber:'',
        meetingMinutes:'',
        negotiationContent:'',
        negotiationResult:'',
        otherAttachments:'',
        onSitePhotos:'',
        nextNegotiationStartTime:'',
        nextNegotiationEndTime:'',
        potentialCustomer:'',
        plan_Time:[],
        },
        addziyuanData:[],

        morenCard: new Date(),
        pageSize:10,
        currentPage: 1,
        total: 0,
        ggXin:false,
        rulesOne: {
          negotiationTime: [{
            required: true,
            message: '请选择谈判时间',
            trigger: 'change'
          }, ],
          negotiationTheme: [{
            required: true,
            message: '请输入谈判主题',
            trigger: 'blur'
          }],
          bidSegmentNumber: [{
            required: true,
            message: '请输入标段号',
            trigger: 'blur'
          }],
          meetingMinutes: [{
            required: true,
            message: '请输入会议纪要',
            trigger: 'blur'
          }, ],
          negotiationResult: [{
            required: true,
            message: '请输入谈判结果',
            trigger: 'blur'
          }],
          otherAttachments: [{
            required: true,
            message: '请选择其他附件',
            trigger: 'change'
          }, ],
        },
        pageindex: {
        pageNumber: 0,
        pageSize: 10,
        potentialCustomer:null
          },
          zipageindex: {
          pageNumber: 0,
          pageSize: 10,
            },
          tableData:[],
          msgEit:false,
          imgList:[]
      }
    },
    created() {

    },
    mounted() {
      this.pageindex.potentialCustomer = this.message
      this.getAll()
    },
      methods: {
        openfile(e) {
          if (e) {
            const fullUrl = this.$baseURL + e;
            try {
              window.open(fullUrl, '_blank'); // 在新标签页中打开文件
            } catch (error) {
              console.error('打开文件失败:', error);
            }
          } else {
            console.error('无文件可查看');
          }
        },
        changimg(e,type) {
          // if(type == 'onSitePhotos'){
          //   this.imgList.push(e)
          // }
          this.formInline[type] = e

        },
        async getAll() {
          const res = await tanGetAll(this.pageindex)
          this.tableData = res.data.content
        },
        genjinMsg(item){
            this.msgEit = true
            this.formInline ={}
            this.formInline = item
            this.formInline.plan_Time = [item.nextNegotiationStartTime,item.nextNegotiationEndTime]

             if(typeof item.intendedResource == 'string' && item.intendedResource != ''){
               this.addziyuanData  = JSON.parse(item.intendedResource)
             }
            if(typeof item.onSitePhotos == 'string'){
              this.imgList = item.onSitePhotos.split(',') ||[]
            }

            this.ggXin = true
        },
        onSubmit(){
        this.morenCard = this.formSel.yytime
        this.getAll()
        },
        resetting(){
        this.morenCard = new Date()
        this.formSel.yytime = ''
        this.getAll()
        },

        genad(){

          this.formInline ={
          negotiationTime:'',
        negotiationTheme:'',
        bidSegmentNumber:'',
        meetingMinutes:'',
        negotiationContent:'',
        negotiationResult:'',
        otherAttachments:'',
        onSitePhotos:'',
        nextNegotiationStartTime:'',
        nextNegotiationEndTime:'',
        potentialCustomer:'',
        plan_Time:[]
        }
      this.msgEit = false
          this.ggXin = true
 this.$refs.tanform.resetFields()
        },
        closeGenjin(){
            this.$emit('cancel',false)
        },


             changeNext(e){
               this.formInline.nextNegotiationStartTime = e[0]
                  this.formInline.nextNegotiationEndTime = e[1]

             },

           closemsg(index){
             this.addziyuanData.splice(index, 1);
           },
           closeFn(val) {
             this.formInline.plan_Time =[]

           this.ggXin = false
           },
           // 新增确定按钮
            addCheck(val) {

             this.$refs.tanform.validate((valid) => {
                  if (valid) {
                 this.formInline.potentialCustomer = this.message
                 // this.formInline.onSitePhotos  =  this.imgList.join(',')
                  if(this.formInline.currentStage == '达成共识'){
                    this.formInline.status = '2'
                  }
                   tanAdd(this.formInline).then(()=>{
                    this.ggXin = false
                    this.getAll()
                  })
                    }else {
                 this.$message({
                   message: '请填写完整信息',
                   type: 'error'
                 })

               }
             })

           },
      }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-calendar button-group {
    display: none;
  }
  .zhuti {
    padding: 0 20px 20px 20px;
    min-height: calc(100vh - 50px - 20px);
    background-color: #fff;
  }

  .formSearch {

    display: flex;
    width: 100%;
    font-size: 14px;
    justify-content: space-between;

  }
  .greens {
    color: #3F9B6A;
  }
::v-deep .el-calendar-table:not(.is-range)td.next{display: none;}
::v-deep .el-calendar-table:not(.is-range)td.prev{visibility:hidden;}
::v-deep .el-calendar__button-group {display: none;}
::v-deep .el-backtop, .el-calendar-table td.is-today{color: #3F9B6A;}
::v-deep .el-calendar-table .el-calendar-day {min-height:85px;}
</style>
