<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="zhuti" v-if="addAct == false  && banAct == false">
      <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>
        <!-- 搜索 -->
        <div class="formSearch">
          <div>
            <el-form
              :model="formSel"
              :inline="true"
            >
              <el-form-item label="方案名称">
                <el-input
                  v-model="formSel.planName"
                  placeholder="请输入"
                  style="width:168px;"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="计划实施时间">
                <el-date-picker style="width:230px;" v-model="plan_Time" value-format="yyyy-MM-dd" prefix-icon="none"
                  type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff">查询
            </el-button>
            <el-button @click="resetting" class="buttonHover"
              style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置
            </el-button>
          </div>

        </div>
        <div style="margin-bottom: 20px;display:flex;">
          <el-button
              style="background-color: #3F9B6A;color: #fff;padding:8px 15px;margin-right:15px;" icon="el-icon-circle-plus-outline"
            @click="addbuss"
            >新增</el-button
          >
          <el-upload class="upload-demo" ref="upload"
           v-if="this.$btnFlax"
                            :limit="1"
                            accept=".xlsx"
                            :action="action"
                            :on-success="daoru"
                            :file-list="fileData"
                             :auto-upload="true"
                             :show-file-list="false">
                            <el-button style="background-color: #fff;color: #3F9B6A;border: 1px solid #dcdfe6;"  class="buttonHover">导入</el-button>
                          </el-upload>
         <!-- <el-button
              style="background-color: #3F9B6A;color: #fff;padding:8px 15px;"
            @click="daoru"
            >导入</el-button> -->
        </div>
        <!-- 表格 -->
        <el-table
          :data="
            tableData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
        >
          <el-table-column
            label="序号"
            min-width="60"
          >
          <template slot-scope="scope">
            {{scope.$index+1}}
          </template>
          </el-table-column>
          <el-table-column
            label="招商方案名称"
            prop="planName"
            min-width="300"
          />
          <el-table-column
            label="规划方案名称"

            min-width="300"
          >
          <template slot-scope="scope">
            {{scope.row.cereInvestmentPlanningManagement.planningName}}
          </template>
          </el-table-column>
          <el-table-column
            label="计划实施时间"

            min-width="250"
          >
          <template slot-scope="scope">
            {{scope.row.cereInvestmentPlanningManagement.implementationStartTime}} - {{scope.row.cereInvestmentPlanningManagement.implementationEndTime}}
          </template>
          </el-table-column>
          <el-table-column
            label="涵盖资源数"
            min-width="120"
>
    <template slot-scope="scope">
        {{ scope.row.cereResourceStrategy.length }}
      </template>
          </el-table-column>
<!--          <el-table-column
            label="资源编号"
            prop="founder"
            min-width="200">
             <template slot-scope="scope">
                    {{ scope.row.cereResourceStrategy.resourcesId }}
                  </template>
                      </el-table-column>
          <el-table-column
            label="资源类型"
            prop="contactInformation"
            min-width="150"
>
     <template slot-scope="scope">
            {{ scope.row.cereResourceStrategy.id }}
          </template>
                      </el-table-column>
          <el-table-column
            label="租金"

            min-width="150"
>
 <template slot-scope="scope">

                      </template>
                      </el-table-column>
          <el-table-column
            label="免租期"

            min-width="150"
         >
         <template slot-scope="scope">

                              </template>
                              </el-table-column>
          <el-table-column
            label="付款方式"

            min-width="150"
          >
          <template slot-scope="scope">

                               </template>

                               </el-table-column> -->
                               <el-table-column
                                         label="审核提醒时间"
                                         prop="auditTime"
                                         min-width="150"
                                       v-if="this.$btnFlax" >

                                        </el-table-column>
          <el-table-column
            label="当前节点"
            min-width="150"
          >
          <template slot-scope="scope">
                       {{scope.row.auditStatus =='1'?'待审核':scope.row.auditStatus =='2'?'审核通过':scope.row.auditStatus =='3'?'已驳回':''}}
                </template>
              </el-table-column>
          <el-table-column
            label="启用状态"
            prop="enableStatus"
            min-width="150"
            v-if="this.$btnFlax"
          >
          <template slot-scope="scope">
  {{scope.row.enableStatus =='0'?'启用':'禁用'}}
          </template>
           </el-table-column>
          <el-table-column label="操作" width="180" fixed="right">
            <template slot-scope="scope">
              <div class="tableBtn greens" @click="handleEditForm(scope.row,false)">
                查看
              </div>
              <div class="tableBtn greens" @click="handleEditForm(scope.row,true)"  v-if="scope.row.auditStatus =='1'">
                编辑
              </div>
              <!-- <div class="tableBtn greens" v-if="scope.row.auditStatus =='1' &&this.$btnFlax" @click="peizhi(scope.row)">
                审核流程配置
              </div> -->
              <!-- <div class="tableBtn greens" v-if="scope.row.enableStatus== 1 || scope.row.enableStatus == null &&scope.row.auditStatus =='2'  && this.$btnFlax"  @click="qiyong(scope.row,0)">
                启用
              </div>
              <div class="tableBtn greens" v-if="scope.row.enableStatus == 0   &&scope.row.auditStatus =='2' &&this.$btnFlax"  @click="qiyong(scope.row,1)">
                禁用
              </div> -->
              <div class="tableBtn greens" @click="delGuan(scope.row)"  >
                删除
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="fenye">
          <el-pagination
            class="pagination"
            :hide-on-single-page="flag"
            background
            small
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
           layout="prev, pager, next,total"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="peiShow" custom-class='bian_css' style="padding: 0;" width="45%"
      :close-on-press-escape="false" center :close-on-click-modal="false" class="dialog_css_Xq" :show-close="false">
      <div style="padding:20px;">
        <div style="font-size: 14px;padding-bottom: 20px;color: #000;">审核流程配置</div>
          <el-form label-position="right" ref="jibenFrom" :model="peiForm"  label-width="140px"
            style="position: relative">
            <el-form-item label="审核提醒时间" class="grid-content bg-purple device-from" prop="planName">
              <el-date-picker style="width:240px;margin-right:5px" v-model="peiForm.auditTime"
                value-format="yyyy-MM-dd HH:mm:ss"    type="datetime" prefix-icon="none" >
              </el-date-picker>
            </el-form-item>
            </el-form>
        <div style="padding-top:20px;display:flex;justify-content: flex-end;">
          <el-button  style="background-color: #3F9B6A;color: #fff"
            @click="peiCheck">确定</el-button>
          <el-button @click="peiShow = false"  style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;" class="buttonHover">取消</el-button>

        </div>

      </div>

    </el-dialog>
    <addxin :showAdd="addAct" @childClose='childClose' v-if="addAct"></addxin>
    <xiang :showBian="banAct"  :steat='steatqie' :list='itemXiang' @bianClose='bianClose' ></xiang>
  </div>
</template>

<script>
import { uploadUrl,token } from '@/utils/request'
import {
  GetAllLinAn,
  GetOnlinLinAn,
  AddLinAn,
  EditLinAn,
  delLinAn,
  addLin,
  selLin,
  editLin,
  delLin,
  selectList

} from '../../../api/tspm'
import {
  fangGetAll,
  fangGetId,
  fangAdd,
  fangEdit,
  fangDel,
  excelAdd
}from '../../../api/fangli'
import upimg from "@/components/ImageUpload/index"
import addxin from "./addform"
import xiang from "./bianform"
export default {
  components: {upimg,addxin,xiang},
  data() {
    return {
      fileData:[],
      detbox: false, // 详情
      edit: true, // 编辑
      formInline: {
        shopName: '',
        positionInformation: '',
        shopArea: '',
        useTo: '',
        rent: '',
        locationImage: '',
        locationDescription: '',
        temporaryPavingId: ''
      }, // 临铺新增数据
      LinID:'',//添加临铺ID
      Ids:'',//查询新增的临铺列表
      action: uploadUrl, // 上传图片
      myHeaders: {
        'Authorization-admin': token
      },
      ggXin: false, // 新增
      sel: [], // 选择资源
      stepNum: 0, // 切换
      linShop: [], // 临铺列表
      isAdd: false,//添加铺位弹框、
      plan_Time:[],
      formSel: {
      planName:'',
        pageNumber: 1,
        pageSize: 10,
        cereInvestmentPlanningManagement:{
          implementationStartTime:'',
          implementationEndTime:''
        }

      },
      secondData: {
        card: 'first', // 切换
      },
      currentPage: 1,
      total: 0,
      flag: false,
      pageSize: 10,
      tableData: [],
      msgid: '',
      pageindex: {
        pageNumber: 1,
        pageSize: 10,
      },
      addAct:false,//新增框
      banAct:false,//详情
      steatqie:false,//编辑详情切换
      itemXiang:{},
      peiShow:false,
      // peiFormRules
      peiId:'',
      peiForm:{
        auditTime:''
      }

    }
  },

  created() {
    this.getAll();
  },
  mounted() {},
  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}`;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    lextStep(val) {
      this.stepNum = val;
    },

    // 查询全数据
    async getAll() {
      const res = await fangGetAll(this.pageindex);
 // let result = [];
 //      res.data.content.forEach(item => {
 //        item.cereResourceStrategy.forEach(strategy => {
 //          // 复制原始数据的部分字段
 //          let newItem = {
 //            planName: item.planName,
 //            cereInvestmentPlanningManagement: item.cereInvestmentPlanningManagement,
 //            auditStatus: item.auditStatus,
 //            // ...其他需要合并显示的字段
 //          };
 //          // 添加cereResourceStrategy中的字段
 //          newItem.cereResourceStrategy = strategy;
 //          result.push(newItem);
 //        })
 //      })
      this.tableData = res.data.content
      this.total = res.data.content.length





    },
    // 查询
    async onSubmit() {
      let forms ={
        planName:'',
        pageNumber: 1,
        pageSize: 10,
        cereInvestmentPlanningManagement:{
          implementationStartTime:'',
          implementationEndTime:''
        }
      }
      if(this.formSel.planName !=''){
        forms.planName = this.formSel.planName
      }
      if(this.plan_Time.length!=0){
          forms.cereInvestmentPlanningManagement.implementationStartTime =  this.plan_Time[0]
          forms.cereInvestmentPlanningManagement.implementationEndTime =  this.plan_Time[1]
      }
      const res = await fangGetAll(forms)
      this.tableData = res.data.content
      this.total = res.data.content.length
    },
    // 详情编辑点击
    handleEditForm(item,ste) {
      console.log(item,ste)
        if(ste){
          this.steatqie = true
        }else{
          this.steatqie = false
        }
        this.itemXiang = item
        this.banAct = true

    },
    bianClose(msg){
      this.banAct = msg
      this.steatqie = false
      this.getAll()
    },
    // 新增
    addbuss() {
       this.addAct = true
    },
    childClose(msg) {
      this.addAct = msg
      this.getAll()
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },

    handleClick() {},
    // 上传
    handlePreview(file) {
      console.log(file);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },

    // 重置按钮
    resetting() {
      this.formSel = {
        planName:'',
        pageNumber: 1,
        pageSize: 10,
        cereInvestmentPlanningManagement:{
          implementationStartTime:'',
          implementationEndTime:''
        }
      }
      this.plan_Time = []
      this.getAll()
    },
    delGuan(itme){

             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') {
                           fangDel({id: itme.id}).then(res=>{
                             this.$message({
                               message: '删除成功',
                               type: 'success'
                             })
                              this.getAll()
                             done();
                           })
                         } else {
                           done();
                         }
           }
           })


    },
    qiyong(item,val){
      if(val == 0){
        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') {
                        fangEdit({id: item.id,enableStatus:val}).then(res=>{
                          this.$message({
                            message: '启用成功',
                            type: 'success'
                          })
                           this.getAll()
                          done();
                        })
                      } else {
                        done();
                      }
        }
        })
      }else{
        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') {
                         fangEdit({id: item.id,enableStatus:val}).then(res=>{
                          this.$message({
                            message: '禁用成功',
                            type: 'success'
                          })
                           this.getAll()
                          done();
                        })
                      } else {
                        done();
                      }
        }
        })
      }
    },
   async peiCheck(){
      if(this.peiForm.auditTime ==''){
        this.$message({
          message: '请填写审核提醒时间',
        })
        return;
      }
      await fangEdit({id:this.peiId,auditTime:this.peiForm.auditTime})
       this.peiShow = false
       this.getAll()
    },
    peizhi(item){
      this.peiForm = {
        auditTime:''
      }
      this.peiShow = true
      this.peiId = item.id
    },
 daoru(response, file, fileList){
   this.fileData.push(file.raw)
   const formDate = new FormData()
   formDate.append('file', this.fileData[0])
   excelAdd(formDate).then(res => {
      this.getAll()
   })
     },
  }
}
</script>
<style scoped>
/deep/ .first-column-bg {
  background-color: #f4f4f5 !important;
}

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

  }



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

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

.greens {
  color: #3f9b6a;
}

 /deep/ .el-table__row {
    font-size: 14px;
    color: #000000e6;
    height: 42px;
  }
.fenye {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  position: relative;
}

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

: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;
}

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

.dialog_css {
  padding: 0px;
}

.dialog_xin {
  padding: 0px;
}

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

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


.el-row {
  &: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-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 .moren {
  .el-input__inner {
    margin-top: 5px;
    padding: 0 20px;
  }
}

/deep/ .el-radio-group {
  margin-top: 11px;
}

/deep/ .el-radio__input.is-checked .el-radio__inner {
  border-color: #3f9b6a;
  background: #3f9b6a;
}

::v-deep .el-col {
  padding: 0 !important;
}

/deep/ .el-radio-group {
  width: 100%;
}

.radio-right-side {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

/deep/ .radio-right-side .el-radio__label {
  display: flex;
  align-items: center;
}

/deep/ .radio-right-side .el-radio__inner {
  order: 1;
}

/deep/ .radio-right-side .el-radio__input {
  display: flex;
  order: 2;
}

/deep/ .radio-right-side {
  &:hover {
    color: #000;
  }
}


::v-deep .setup {
  .el-steps {
    justify-content: center;
  }
}

::v-deep .el-step__head.is-finish {
  color: #c0c4cc;
  border-color: #c0c4cc;
}

::v-deep .el-step__title.is-finish {
  color: #c0c4cc;
}

::v-deep .el-step__title.is-process {
  color: #c0c4cc;
}

::v-deep .el-tabs {
  width: 100%;
}
::v-deep .setup{
  .el-step__main{
    margin-left: -17px;
  }
 .el-step__title.is-process{
   color: #3f9b6a;
 }

}
::v-deep .el-pagination__jump{
  margin-top:5px;
}
::v-deep .linClass{
.el-dialog__header{
padding: 20px 20px 10px;
font-size: 14px;
}
}
</style>
<style lang="scss" scoped>
  ::v-deep .bian_css {
    .el-dialog__header {
      padding: 0px;
    }

  }

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

  ::v-deep .el-pagination__total {
    position: absolute;
    left: 10px;
  }

  ::v-deep .diaslog_zhong {
    .el-dialog__body {
      padding: 10px 20px 20px 20px;
    }

    .el-upload--picture-card {
      width: 130px;
      height: 130px;
    }
  }
</style>
