<template>
  <div style="padding: 10px; background-color: #f2f3f5">
    <div class="zhuti">
      <div style="font-weight: bold; font-size: 14px">临铺方案管理</div>
      <div>
        <!-- 搜索 -->
        <div class="formSearch">
          <el-form
            :inline="true"
            :model="formSel"
            label-width="60px"
            label-position="left"
          >
            <el-form-item label="所属区域">
              <el-select
                v-model="formSel.belongingRegion"
                placeholder="请选择"
                size="mini"
              >
                <el-option label="1" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="商铺名称">
              <el-input
                v-model="formSel.shopName"
                placeholder="请输入"
                size="mini"
              />
            </el-form-item>
            <el-form-item label="计划时间">
              <el-date-picker
                v-model="formSel.scheduledTime"
                type="date"
                size="mini"
                placeholder="选择日期时间"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                plain
                size="mini"
                style="background-color: #3F9B6A;color: #fff;border-color:#3F9B6Amargin-top:5px;;"
                @click="onSubmit"
                >查询
              </el-button>
              <el-button
                plain
                size="mini"
                style="color: #000; border-color: #d5d5d5; margin-top: 5px"
                @click="resetting"
                >重置
              </el-button>
            </el-form-item>
          </el-form>
          <el-button
            plain
            size="mini"
            style="
              background-color: #3f9b6a;
              color: #fff;
              border-color: #3f9b6a;
              width: 56px;
              height: 27px;
              margin-top: 15px;
            "
            @click="addbuss"
            >新增</el-button
          >
        </div>

        <!-- 表格 -->
        <el-table
          :data="
            tableData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          :header-cell-style="{
            fontSize: '12px',
            backgroundColor: '#FAFAFA',
            color: '#000',
            fontWeight: 'normal',
          }"
          :border="true"
          style="width: 100%"
        >
          <el-table-column
            label="序号"
            width="auto"
            min-width="6%"
            align="center"
          >
          <template slot-scope="scope">
            {{scope.$index+1}}
          </template>
          </el-table-column>
          <el-table-column
            label="编号"
            prop="id"
            width="auto"
            min-width="12%"
          />
          <el-table-column
            label="所属区域"
            prop="belongingRegion"
            width="auto"
            min-width="12%"
          />
          <el-table-column
            label="临铺方案名称"
            prop="temporaryPavingPlanName"
            width="auto"
            min-width="12%"
          />
          <el-table-column
            label="商铺名称"
            prop="shopName"
            width="auto"
            min-width="12%"
            sortable
          />
          <el-table-column
            label="创建人"
            prop="founder"
            width="auto"
            min-width="12%"
            sortable
          />
          <el-table-column
            label="联系方式"
            prop="contactInformation"
            width="auto"
            min-width="12%"
            sortable
          />
          <el-table-column
            label="临铺数量"
            prop="temporaryShopsNumber"
            width="auto"
            min-width="12%"
            sortable
          />
          <el-table-column
            label="计划时间"
            prop="scheduledTime"
            width="auto"
            min-width="12%"
            sortable
          />
          <el-table-column
            prop="auditStatus"
            label="审核状态"
            width="auto"
            min-width="12%"
            sortable
          >
            <template slot-scope="scope">
              {{ scope.row.auditStatus == "0" ? "待审核" :scope.row.auditStatus == "1" ?'已通过' :'已驳回' }}
            </template>
          </el-table-column>
          <el-table-column
            label="提交时间"
            prop="submissionTime"
            width="auto"
            min-width="12%"
            sortable
          />

          <el-table-column label="操作" width="auto" min-width="17%">
            <template slot-scope="scope">
              <div class="tableBtn greens" @click="handleEditForm(scope.row)">
                详情
              </div>
              <div class="tableBtn greens" @click="bianjilist(scope.row)">
                编辑
              </div>
              <div
                v-if="scope.row.dataForm == '1'"
                class="tableBtn greens"
                @click="fabu(scope.row)"
              >
                发布
              </div>
              <div class="tableBtn greens" @click="delGuan(scope.row)">
                删除
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 详情框  :visible.sync="detbox" -->
        <!-- <div  v-show="detbox" class="dialog_css_Xq " style="padding: 0;width:85%"> -->
        <el-dialog
          :visible.sync="detbox"
          custom-class="dialog_css"
          style="padding: 0"
          width="85%"
          center
          :close-on-click-modal="false"
          class="dialog_css_Xq"
          :show-close="false"
        >
          <div
            style="
              background-color: #fafafa;
              border: 1px solid #eaeaea;
              height: 42px;
              width: 100%;
              margin-bottom: 20px;
              padding: 0 20px;
              line-height: 42px;
              font-weight: 600;
            "
          >
            详情
          </div>
          <div style="padding: 0 20px">
            <div
              style="
                display: flex;
                justify-content: space-between;
                font-size: 12px;
                margin-bottom: 20px;
              "
            >
              <el-tabs v-model="secondData.card" @tab-click="handleClick">
                <el-tab-pane label="基本信息" name="first">
                  <div style="width: 100%">
                    <el-row style="height: 38px; margin-bottom: 15px">
                      <el-col :span="24">
                        <el-form
                          size="small"
                          :inline="true"
                          label-width="100px"
                        >
                          <el-form-item prop="name" style="width: 100%">
                            <div
                              slot="label"
                              style="
                                text-align: left;
                                height: 38px;
                                line-height: 38px;
                                padding-left: 10px;
                              "
                            >
                              <span style="font-size: 12px; color: #000"
                                >商家编号</span
                              >
                            </div>
                            <div
                              v-if="edit"
                              style="
                                height: 38px;
                                line-height: 38px;
                                border: 1px solid #ebeef5;
                                padding: 0 20px;
                                font-size: 12px;
                              "
                            >
                              {{ secondData.shopNum }}
                            </div>
                            <el-input
                              v-else
                              v-model="secondData.shopNum"
                              placeholder="请输入"
                              class="moren"
                            />
                          </el-form-item>
                        </el-form>
                      </el-col>
                    </el-row>

                    <el-row style="height: 38px; margin-bottom: 15px">
                      <el-col :span="24">
                        <el-form
                          size="small"
                          :inline="true"
                          label-width="100px"
                        >
                          <el-form-item prop="name" style="width: 100%">
                            <div
                              slot="label"
                              style="
                                text-align: left;
                                height: 38px;
                                line-height: 38px;
                                padding-left: 10px;
                              "
                            >
                              <span style="font-size: 12px; color: #000"
                                >主办方</span
                              >
                            </div>
                            <div
                              v-if="edit"
                              style="
                                height: 38px;
                                line-height: 38px;
                                border: 1px solid #ebeef5;
                                padding: 0 20px;
                                font-size: 12px;
                              "
                            >
                              {{ secondData.founder }}
                            </div>
                            <el-input
                              v-else
                              v-model="secondData.founder"
                              placeholder="请输入"
                              class="moren"
                            />
                          </el-form-item>
                        </el-form>
                      </el-col>
                    </el-row>

                    <el-row style="height: 38px; margin-bottom: 15px">
                      <el-col :span="24">
                        <el-form
                          size="small"
                          :inline="true"
                          label-width="100px"
                        >
                          <el-form-item prop="name" style="width: 100%">
                            <div
                              slot="label"
                              style="
                                text-align: left;
                                height: 38px;
                                line-height: 38px;
                                padding-left: 10px;
                              "
                            >
                              <span style="font-size: 12px; color: #000"
                                >联系方式</span
                              >
                            </div>
                            <div
                              v-if="edit"
                              style="
                                height: 38px;
                                line-height: 38px;
                                border: 1px solid #ebeef5;
                                padding: 0 20px;
                                font-size: 12px;
                              "
                            >
                              {{ secondData.contactInformation }}
                            </div>
                            <el-input
                              v-else
                              v-model="secondData.contactInformation"
                              placeholder="请输入"
                              class="moren"
                            />
                          </el-form-item>
                        </el-form>
                      </el-col>
                    </el-row>
                    <el-row style="height: 38px; margin-bottom: 15px">
                      <el-col :span="24">
                        <el-form
                          size="small"
                          :inline="true"
                          label-width="100px"
                        >
                          <el-form-item prop="name" style="width: 100%">
                            <div
                              slot="label"
                              style="
                                text-align: left;
                                height: 38px;
                                line-height: 38px;
                                padding-left: 10px;
                              "
                            >
                              <span style="font-size: 12px; color: #000"
                                >计划招商时间</span
                              >
                            </div>
                            <div
                              v-if="edit"
                              style="
                                height: 38px;
                                line-height: 38px;
                                border: 1px solid #ebeef5;
                                padding: 0 20px;
                                font-size: 12px;
                              "
                            >
                              {{ secondData.scheduledTime }}
                            </div>
                            <el-input
                              v-else
                              v-model="secondData.scheduledTime"
                              placeholder="请输入"
                              class="moren"
                            />
                          </el-form-item>
                        </el-form>
                      </el-col>
                    </el-row>
                    <el-row style="height: 38px; margin-bottom: 15px">
                      <el-col :span="24">
                        <el-form
                          size="small"
                          :inline="true"
                          label-width="100px"
                        >
                          <el-form-item prop="name" style="width: 100%">
                            <div
                              slot="label"
                              style="
                                text-align: left;
                                height: 38px;
                                line-height: 38px;
                                padding-left: 10px;
                              "
                            >
                              <span style="font-size: 12px; color: #000"
                                >活动场所</span
                              >
                            </div>
                            <div
                              v-if="edit"
                              style="
                                height: 38px;
                                line-height: 38px;
                                border: 1px solid #ebeef5;
                                padding: 0 20px;
                                font-size: 12px;
                              "
                            >
                              {{ secondData.venue }}
                            </div>
                            <el-input
                              v-else
                              v-model="secondData.venue"
                              placeholder="请输入"
                              class="moren"
                            />
                          </el-form-item>
                        </el-form>
                      </el-col>
                    </el-row>
                    <el-row style="height: 38px; margin-bottom: 15px">
                      <el-col :span="24">
                        <el-form
                          size="small"
                          :inline="true"
                          label-width="100px"
                        >
                          <el-form-item prop="name" style="width: 100%">
                            <div
                              slot="label"
                              style="
                                text-align: left;
                                height: 38px;
                                line-height: 38px;
                                padding-left: 10px;
                              "
                            >
                              <span style="font-size: 12px; color: #000"
                                >活动名称</span
                              >
                            </div>
                            <div
                              v-if="edit"
                              style="
                                height: 38px;
                                line-height: 38px;
                                border: 1px solid #ebeef5;
                                padding: 0 20px;
                                font-size: 12px;
                              "
                            >
                              {{ secondData.activityName }}
                            </div>
                            <el-input
                              v-else
                              v-model="secondData.activityName"
                              placeholder="请输入"
                              class="moren"
                            />
                          </el-form-item>
                        </el-form>
                      </el-col>
                    </el-row>
                    <el-row style="height: 38px; margin-bottom: 15px">
                      <el-col :span="24">
                        <el-form
                          size="small"
                          :inline="true"
                          label-width="100px"
                        >
                          <el-form-item prop="name" style="width: 100%">
                            <div
                              slot="label"
                              style="
                                text-align: left;
                                height: 38px;
                                line-height: 38px;
                                padding-left: 10px;
                              "
                            >
                              <span style="font-size: 12px; color: #000"
                                >活动内容</span
                              >
                            </div>
                            <div
                              style="
                                font-size: 12px;
                              "
                            >
                         <div style="border: 1px solid #ccc">
                           <Toolbar
                            v-if="edit == false"
                             readOnly = 'true'
                             style="border-bottom: 1px solid #ccc;height:90px"
                             :editor="editor"
                             :default-config="toolbarConfig"
                             :mode="mode"
                           />
                           <Editor
                             v-model="secondData.activityContent"
                             style="height: 240px; overflow-y: hidden"
                             :default-config="editorConfig"
                             :mode="mode"
                             @onCreated="onCreated"
                           />
                         </div>
                            </div>

                          </el-form-item>
                        </el-form>
                      </el-col>
                    </el-row>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="经营策略" name="second">
                  <div style="width: 100%">
                    <el-row style="margin-bottom: 15px">
                      <el-col :span="24">
                        <el-form
                          size="small"
                          :inline="true"
                          label-width="100px"
                        >
                          <el-form-item prop="name" style="width: 100%">
                            <div
                              slot="label"
                              style="text-align: left; padding-left: 10px"
                            >
                              <span style="font-size: 12px; color: #000"
                                >铺位划分</span
                              >
                            </div>
                            <div style="font-size: 12px">
                              <el-table
                                :data="linShop"
                                :header-cell-style="{
                                  fontSize: '12px',
                                  backgroundColor: '#FAFAFA',
                                  color: '#000',
                                  fontWeight: 'normal',
                                }"
                                :border="true"
                                style="width: 100%"
                              >
                                <el-table-column
                                  label="序号"
                                  width="auto"
                                  min-width="6%"
                                  prop="id"
                                  align="center"
                                />
                                <el-table-column
                                  label="铺位名称"
                                  prop="shopName"
                                  width="auto"
                                  min-width="12%"
                                />
                                <el-table-column
                                  label="位置信息"
                                  prop="positionInformation"
                                  width="auto"
                                  min-width="12%"
                                />
                                <el-table-column
                                  label="铺位面积"
                                  prop="shopArea"
                                  width="auto"
                                  min-width="12%"
                                />
                                <el-table-column
                                  label="用途"
                                  prop="useTo"
                                  width="auto"
                                  min-width="12%"
                                />
                                <el-table-column
                                  label="租金"
                                  prop="rent"
                                  width="auto"
                                  min-width="12%"
                                />
                                <el-table-column
                                  label="位置图片"
                                  prop="locationImage"
                                  width="auto"
                                  min-width="12%"
                                >
                                  <template slot-scope="scope">
                                     <img :src="scope.row.locationImage" style="width:50px;height:50px;"></img>
                                    </template>
                                    </el-table-column>
                                <el-table-column
                                  label="位置描述"
                                  prop="locationDescription"
                                  width="auto"
                                  min-width="12%"
                                />
                                <el-table-column
                                  label="操作"
                                  width="auto"
                                  min-width="17%"
                                >
                                  <template slot-scope="scope">
                                    <!-- <div
                                      v-if="edit == false"
                                      class="tableBtn greens"
                                      @click="bianjilist(scope.row)"
                                    >
                                      编辑
                                    </div> -->
                                    <div
                                      v-if="edit == false"
                                      class="tableBtn greens"
                                      @click="Lindel(scope.row)"
                                    >
                                      删除
                                    </div>
                                  </template>
                                </el-table-column>
                              </el-table>
                              <divd
                                v-if="edit == false"
                                style="margin-bottom: 15px; width: 100%"
                              >
                                <el-button
                                  icon="el-icon-plus"
                                  size="mini"
                                  @click="addPavingPlan(1)"
                                  style="
                                    width: 100%;
                                    border: 1px solid #3f9b6a;
                                    background-color: #fff;
                                    color: #3f9b6a;
                                  "
                                  >添加铺位</el-button
                                >
                              </divd>
                            </div>
                          </el-form-item>
                        </el-form>
                      </el-col>
                    </el-row>
                    <el-row style="height: 38px; margin-bottom: 15px">
                      <el-col :span="24">
                        <el-form
                          size="small"
                          :inline="true"
                          label-width="100px"
                        >
                          <el-form-item prop="name" style="width: 100%">
                            <div
                              slot="label"
                              style="
                                text-align: left;
                                height: 38px;
                                line-height: 38px;
                                padding-left: 10px;
                              "
                            >
                              <span style="font-size: 12px; color: #000"
                                >铺位管理策略</span
                              >
                            </div>
                            <div
                              v-if="edit"
                              style="
                                height: 38px;
                                line-height: 38px;
                                border: 1px solid #ebeef5;
                                padding: 0 20px;
                                font-size: 12px;
                              "
                            >
                              {{ secondData.shopManagementStrategy}}
                            </div>
                            <el-input
                              v-else
                              v-model="secondData.shopManagementStrategy"
                              placeholder="请输入"
                              class="moren"
                            />
                          </el-form-item>
                        </el-form>
                      </el-col>
                    </el-row>
                    <el-row style="height: 38px; margin-bottom: 15px">
                      <el-col :span="24">
                        <el-form
                          size="small"
                          :inline="true"
                          label-width="100px"
                        >
                          <el-form-item prop="name" style="width: 100%">
                            <div
                              slot="label"
                              style="
                                text-align: left;
                                height: 38px;
                                line-height: 38px;
                                padding-left: 10px;
                              "
                            >
                              <span style="font-size: 12px; color: #000"
                                >用水策略</span
                              >
                            </div>
                            <div style="border: 1px solid #ccc">
                              <Toolbar
                               v-if="edit == false"
                                readOnly = 'true'
                                style="border-bottom: 1px solid #ccc;height:90px"
                                :editor="editor"
                                :default-config="toolbarConfig"
                                :mode="mode"
                              />
                              <Editor
                                v-model="secondData.waterStrategyContent"
                                style="height: 240px; overflow-y: hidden"
                                :default-config="editorConfig"
                                :mode="mode"
                                @onCreated="onCreated"
                              />
                            </div>

                          </el-form-item>
                        </el-form>
                      </el-col>
                    </el-row>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>

            <div
              style="
                margin-top: 50px;
                width: 99%;
                padding: 10px;
                display: flex;
                justify-content: flex-end;
              "
            >
              <el-button
                type="primary"
                style="
                  color: #000;
                  border-color: #d7d7d7;
                  background-color: #fff;
                  line-height: 0px;
                "
                @click="closeFn(1)"
                >取消</el-button
              >
              <el-button
                type="primary"
                style="
                  background-color: #3f739b;
                  color: #fff;
                  border-color: #3f9b6a;
                  line-height: 0px;
                "
                @click="bianji"
                >编辑</el-button
              >

              <el-button
                type="primary"
                style="
                  background-color: #3f9b6a;
                  color: #fff;
                  border-color: #3f9b6a;
                  line-height: 0px;
                "
                @click="msgeditS"
                >确定</el-button
              >
            </div>
          </div>
        </el-dialog>
        <!-- ******************************************************弹框开始****************************************************** -->
        <!-- 新增弹框 -->
        <el-dialog
          :visible.sync="ggXin"
          custom-class="dialog_css"
          style="padding: 0"
          width="88%"
          center
          :close-on-click-modal="false"
          class="dialog_css_Xq"
          :show-close="false"
        >
          <div
            style="
              background-color: #fafafa;
              border: 1px solid #eaeaea;
              height: 42px;
              width: 100%;
              margin-bottom: 20px;
              padding: 0 20px;
              line-height: 42px;
              font-weight: 600;
            "
          >
            新增
          </div>
          <div class="setup">
            <el-steps :space="200" :active="stepNum">
              <el-step title="基础信息" />
              <el-step title="经营策略" />
            </el-steps>
          </div>
          <div v-if="stepNum == 0" style="padding: 0 20px 20px 20px">
            <el-form ref="ruleForm" :model="ruleForm" label-width="100px">
              <el-form-item label="计划招商时间">
                <el-date-picker
                      v-model="ruleForm.scheduledTime"
                      type="date"
                      size="mini"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期时间">
                    </el-date-picker>
                <!-- <el-date-picker
                  v-model="ruleForm.scheduledTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="yyyy-MM-dd"
                  size="mini"
                /> -->
              </el-form-item>
              <el-form-item label="活动场所">
                <el-input
                  v-model="ruleForm.venue"
                  placeholder="请输入"
                  size="mini"
                />
              </el-form-item>
              <el-form-item label="活动名称">
                <el-input
                  v-model="ruleForm.activityName"
                  placeholder="请输入"
                  size="mini"
                />
              </el-form-item>
              <el-form-item label="活动内容">
                <div style="border: 1px solid #ccc">
                  <Toolbar
                    style="border-bottom: 1px solid #ccc"
                    :editor="editor"
                    :default-config="toolbarConfig"
                    :mode="mode"
                  />
                  <Editor
                    v-model="ruleForm.activityContent"
                    style="height: 210px; overflow-y: hidden"
                    :default-config="editorConfig"
                    :mode="mode"
                    @onCreated="onCreated"
                  />
                </div>
              </el-form-item>
            </el-form>
          </div>
          <div v-else style="padding: 0 20px 20px 20px">
            <div>
              <div style="margin-bottom: 10px">铺位划分</div>
              <el-table
                :data="linShop"
                :header-cell-style="{
                  fontSize: '12px',
                  backgroundColor: '#FAFAFA',
                  color: '#000',
                  fontWeight: 'normal',
                }"
                :border="true"
                style="width: 100%"
              >
                <el-table-column
                  label="序号"
                  width="auto"
                  min-width="6%"
                  prop="id"
                  align="center"
                />
                <el-table-column
                  label="铺位名称"
                  prop="shopName"
                  width="auto"
                  min-width="12%"
                />
                <el-table-column
                  label="位置信息"
                  prop="positionInformation"
                  width="auto"
                  min-width="12%"
                />
                <el-table-column
                  label="铺位面积"
                  prop="shopArea"
                  width="auto"
                  min-width="12%"
                />
                <el-table-column
                  label="用途"
                  prop="useTo"
                  width="auto"
                  min-width="12%"
                />
                <el-table-column
                  label="租金"
                  prop="rent"
                  width="auto"
                  min-width="12%"
                />
               <el-table-column
                 label="位置图片"
                 prop="locationImage"
                 width="auto"
                 min-width="12%"
               >
                 <template slot-scope="scope">
                    <img :src="scope.row.locationImage" style="width:50px;height:50px;"></img>
                   </template>
                   </el-table-column>
                <el-table-column
                  label="位置描述"
                  prop="locationDescription"
                  width="auto"
                  min-width="12%"
                />
                <el-table-column label="操作" width="auto" min-width="17%">
                  <template slot-scope="scope">
                    <div class="tableBtn greens" @click="DelLin(scope.row,scope.$index)">
                      删除
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div style="margin-bottom: 15px; width: 100%">
              <el-button
                icon="el-icon-plus"
                size="mini"
                @click="addPavingPlan(2)"
                style="
                  width: 100%;
                  border: 1px solid #3f9b6a;
                  background-color: #fff;
                  color: #3f9b6a;
                "
                >添加铺位</el-button
              >
            </div>
            <div>
              <div style="display: flex; font-size: 12px; margin-bottom: 10px">
                <div>铺位管理策略</div>
                <div style="margin-left: 20px">
                  <el-radio v-model="ruleForm.shopManagementStrategy" label="0">填写</el-radio>
                  <el-radio v-model="ruleForm.shopManagementStrategy" label="1">上传</el-radio>
                </div>
              </div>
              <el-button
                v-if="ruleForm.shopManagementStrategy == '1'"
                icon="el-icon-plus"
                size="mini"
                style="
                  border: 1px solid #3f9b6a;
                  background-color: #fff;
                  color: #3f9b6a;
                  margin-left: 93px;
                "
                >点击上传</el-button
              >
              <div
                v-else
                style="border: 1px solid #ccc; margin-left: 93px; width: 80%"
              >
                <Toolbar
                  style="border-bottom: 1px solid #ccc"
                  :editor="editor"
                  :default-config="toolbarConfig"
                  :mode="mode"
                />
                <Editor
                  v-model="ruleForm.shopManagementStrategyContent"
                  style="height: 180px; overflow-y: hidden"
                  :default-config="editorConfig"
                  :mode="mode"
                  @onCreated="onCreated"
                />
              </div>
            </div>
            <div style="margin-top: 10px">
              <div
                style="
                  display: flex;
                  font-size: 12px;
                  justify-content: space-between;
                "
              >
                <div
                  style="display: flex; font-size: 12px; margin-bottom: 10px"
                >
                  <div style="margin-right: 24px">用水策略</div>
                  <div style="margin-left: 20px">
                    <el-radio v-model="ruleForm.waterStrategy" label="0">填写</el-radio>
                    <el-radio v-model="ruleForm.waterStrategy" label="1">上传</el-radio>
                  </div>
                </div>
                <div>
                  <el-select
                    v-model="ruleForm.waterStrategyShow"
                    placeholder="请选择是否对公众展示"
                    size="mini"
                    style="172px"
                  >
                    <el-option label="是" value="1" />
                    <el-option label="否" value="0" />
                  </el-select>
                </div>
              </div>
              <el-button
                v-if="ruleForm.waterStrategy == '1'"
                icon="el-icon-plus"
                size="mini"
                style="
                  border: 1px solid #3f9b6a;
                  background-color: #fff;
                  color: #3f9b6a;
                  margin-left: 93px;
                "
                >点击上传</el-button
              >
              <div
                v-else
                style="border: 1px solid #ccc; margin-left: 93px; width: 80%"
              >
                <Toolbar
                  style="border-bottom: 1px solid #ccc"
                  :editor="editor"
                  :default-config="toolbarConfig"
                  :mode="mode1"
                />
                <Editor
                  v-model="ruleForm.waterStrategyContent"
                  style="height: 180px; overflow-y: hidden"
                  :default-config="editorConfig"
                  :mode="mode1"
                  @onCreated="onCreated"
                />
              </div>
            </div>
            <div style="margin-top: 10px">
              <div
                style="
                  display: flex;
                  font-size: 12px;
                  justify-content: space-between;
                "
              >
                <div
                  style="display: flex; font-size: 12px; margin-bottom: 10px"
                >
                  <div style="margin-right: 24px">用电策略</div>
                  <div style="margin-left: 20px">
                    <el-radio v-model="ruleForm.electricityStrategy" label="0">填写</el-radio>
                    <el-radio v-model="ruleForm.electricityStrategy" label="1">上传</el-radio>
                  </div>
                </div>
                <div>
                  <el-select
                    v-model="ruleForm.electricityStrategyShow"
                    placeholder="请选择是否对公众展示"
                    size="mini"
                    style="172px"
                  >
                    <el-option label="是" value="1" />
                    <el-option label="否" value="0" />
                  </el-select>
                </div>
              </div>
              <el-button
                v-if="ruleForm.electricityStrategy == '1'"
                icon="el-icon-plus"
                size="mini"
                style="
                  border: 1px solid #3f9b6a;
                  background-color: #fff;
                  color: #3f9b6a;
                  margin-left: 93px;
                "
                >点击上传</el-button>
              <div
                v-else
                style="border: 1px solid #ccc; margin-left: 93px; width: 80%"
              >
                <Toolbar
                  style="border-bottom: 1px solid #ccc"
                  :editor="editor"
                  :default-config="toolbarConfig"
                  :mode="mode2"
                />
                <Editor
                  v-model="ruleForm.electricityStrategyContent"
                  style="height: 180px; overflow-y: hidden"
                  :default-config="editorConfig"
                  :mode="mode2"
                  @onCreated="onCreated"
                />
              </div>
            </div>
            <div style="margin-top: 10px">
              <div
                style="
                  display: flex;
                  font-size: 12px;
                  justify-content: space-between;
                "
              >
                <div
                  style="display: flex; font-size: 12px; margin-bottom: 10px"
                >
                  <div style="margin-right: 24px">用气策略</div>
                  <div style="margin-left: 20px">
                    <el-radio v-model="ruleForm.gasStrategy" label="0">填写</el-radio>
                    <el-radio v-model="ruleForm.gasStrategy" label="1">上传</el-radio>
                  </div>
                </div>
                <div>
                  <el-select
                    v-model="ruleForm.gasStrategyShow"
                    placeholder="请选择是否对公众展示"
                    size="mini"
                    style="172px"
                  >
                    <el-option label="是" value="1" />
                    <el-option label="否" value="0" />
                  </el-select>
                </div>
              </div>
              <el-button
                v-if="ruleForm.gasStrategy == '1'"
                icon="el-icon-plus"
                size="mini"
                style="
                  border: 1px solid #3f9b6a;
                  background-color: #fff;
                  color: #3f9b6a;
                  margin-left: 93px;
                "
                >点击上传</el-button
              >
              <div
                v-else
                style="border: 1px solid #ccc; margin-left: 93px; width: 80%"
              >
                <Toolbar
                  style="border-bottom: 1px solid #ccc"
                  :editor="editor"
                  :default-config="toolbarConfig"
                  :mode="mode3"
                />
                <Editor
                  v-model="ruleForm.gasStrategyContent"
                  style="height: 180px; overflow-y: hidden"
                  :default-config="editorConfig"
                  :mode="mode3"
                  @onCreated="onCreated"
                />
              </div>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button
              size="mini"
              style="background-color: #fff; color: #000"
              @click="closeFn(2)"
              >取 消</el-button
            >
            <el-button
              v-if="stepNum == 0"
              type="primary"
              size="mini"
              style="background-color: #3f9b6a; border-color: #3f9b6a"
              @click="lextStep(1)"
              >下一步</el-button
            >
            <el-button
              v-if="stepNum == 1"
              type="primary"
              size="mini"
              style="background-color: #3f9b6a; border-color: #3f9b6a"
              @click="lextStep(0)"
              >上一步</el-button
            >
            <el-button
               v-if="stepNum == 1"
              type="primary"
              size="mini"
              style="background-color: #3f9b6a; border-color: #3f9b6a"
              @click="addCheck('ruleForm')"
              >确 定</el-button
            >
          </span>
        </el-dialog>
        <el-dialog
          :close-on-click-modal="false"
          title="新建临铺"
          width="800px"
          top="5vh"
class="linClass"
          :visible.sync="isAdd"
        >
          <el-form
            ref="form"
            class="dialog-form"
            :model="formInline"
            :rules="rules"
            size="small"
            label-width="80px"
          >
            <el-form-item label="铺位名称" prop="shopName">
              <el-input v-model="formInline.shopName" />
            </el-form-item>
            <el-form-item label="位置信息" prop="positionInformation">
              <el-input v-model="formInline.positionInformation" />
            </el-form-item>
            <el-form-item label="铺位面积" prop="shopArea">
              <el-input v-model="formInline.shopArea" />
            </el-form-item>

            <el-form-item label="用途" prop="useTo">
              <el-input v-model="formInline.useTo" />
            </el-form-item>
            <el-form-item label="租金" prop="rent">
              <el-input v-model="formInline.rent" />
            </el-form-item>

            <el-form-item label="位置图片" prop="locationImage">
              <upimg v-model="formInline.locationImage" :limit="1" :fileSize="1"></upimg>

            </el-form-item>
            <el-form-item label="位置描述" prop="locationDescription">
              <el-input v-model="formInline.locationDescription" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button
              @click="doCancel"
              size="mini"
              style="background-color: #fff; color: #000"
              >取消</el-button
            >
            <el-button
              style="background-color: #3f9b6a; color: #fff"
              size="mini"
              @click="doSubmit"
              >确认</el-button
            >
          </div>
        </el-dialog>
        <div class="fenye">
          <div style="line-height: 34px">显示第1到第10条记录</div>
          <el-pagination
            class="pagination"
            :hide-on-single-page="flag"
            background
            small
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            sslayout="total,sizes,prev, pager,next"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

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

} from '../../../api/tspm';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import upimg from "@/components/ImageUpload/index";
export default {
  name: 'Publish',
  components: { Editor, Toolbar ,upimg},

  data() {
    return {
      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,//添加铺位弹框
      linShopCl: {
        puwei: '1',
        shui: '1',
        shuiz: '',
        dian: '1',
        dianz: '',
        qi: '1',
        qiz: '',
      },
      formSel: {
       belongingRegion:'',
       shopName:'',
       scheduledTime:'',
       pageNumber: 1,
       pageSize: 10
      },
      ruleForm: {
       scheduledTime:'', //计划时间
       venue:'',//活动场所
       activityName:'',//活动名称
       activityContent:'',//活动内容
       shopManagementStrategy:'0',//铺位管理策略(0.埴写1.上传)
       shopManagementStrategyContent:'',//铺位管理策略内容
       waterStrategy:'0',//用水策略(0.填写1.上传)
       waterStrategyShow:'',//用水策略是否对公众展示(0.否 1.是)
       waterStrategyContent:'',//用水策略内容
       electricityStrategy:'0',//用电策略(0.填写1.上传)
       electricityStrategyShow:'',//用电策略是否对公众展示(0.否 1.是)
       electricityStrategyContent:'',//用电策略内容
       gasStrategy:'0',//用气策略(0.填写1.上传)
       gasStrategyShow:'',//用气策略是否对公众展示(0.否 1.是)
       gasStrategyContent:'',//用气策略内容
       auditStatus:'0',//审核状态
      },
      secondData: {
        card: 'first', // 切换
      },
      currentPage: 1,
      total: 100,
      flag: false,
      pageSize: 10,
      tableData: [],
      msgid: '',
      pageindex: {
        pageNumber: 1,
        pageSize: 10,
      },
      chart: null,
      chart1: null,
      editor: null,
      toolbarConfig: {},
      editorConfig: { placeholder: '请输入内容...' },
      mode: 'default', // or 'simple'
      toolbarConfig1:{},
      mode1:'default',
      toolbarConfig2:{},
      mode2:'default',
      toolbarConfig3:{},
      mode3:'default',
    };
  },

  created() {
    this.getAll();
  },
  mounted() {},
  // beforeDestroy() {
  //   const editor = this.editor
  //   if (editor == null) return
  //   editor.destroy() // 组件销毁时，及时销毁编辑器
  // },
  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;
    },
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    // 查询全数据
    async getAll() {
      const res = await GetAllLinAn(this.pageindex);
      this.tableData = res.data.content;
    },
    // 编辑确认
    async msgeditS() {
      this.secondData.id = this.msgid;
      const res = await EditLinAn(this.secondData);
      console.log(res);
      this.detbox = false;
      this.getAll();
    },
    // 编辑
    bianji() {
      if (this.edit) {
        this.edit = false;
      }
    },
    bianjilist(item) {
      this.detbox = true;
      this.secondData = item;
      this.msgid = item.id;
      if (this.edit) {
        this.edit = false;
      }
    },
    // 发布
    async fabu(item) {
      const upTime = this.updateCurrentTime();
      await EditLinAn({ id: item.id, dataForm: '2', submissionTime: upTime });
      this.getAll();
    },
    // 查询
    async onSubmit() {
     const res =  await GetOnlinLinAn(this.formSel)
     this.tableData = res.data.content || []
    },

    // 详情点击
   async handleEditForm(item) {
          this.secondData = item;
        this.secondData.card =  'first'
      this.detbox = true;
      this.msgid = item.id;
   const res =  await selLin({temporaryPavingId:item.id})
     this.linShop =res.data
    },
    // 新增
    addbuss() {
      this.ruleForm={
       scheduledTime:'', //计划时间
       venue:'',//活动场所
       activityName:'',//活动名称
       activityContent:'',//活动内容
       shopManagementStrategy:'0',//铺位管理策略(0.埴写1.上传)
       shopManagementStrategyContent:'',//铺位管理策略内容
       waterStrategy:'0',//用水策略(0.填写1.上传)
       waterStrategyShow:'',//用水策略是否对公众展示(0.否 1.是)
       waterStrategyContent:'',//用水策略内容
       electricityStrategy:'0',//用电策略(0.填写1.上传)
       electricityStrategyShow:'',//用电策略是否对公众展示(0.否 1.是)
       electricityStrategyContent:'',//用电策略内容
       gasStrategy:'0',//用气策略(0.填写1.上传)
       gasStrategyShow:'',//用气策略是否对公众展示(0.否 1.是)
       gasStrategyContent:'',//用气策略内容
       auditStatus:'0',//审核状态
      }
      this.ggXin = true;
      this.getAll();
       this.linShop = []
    },
    // 新增确定
    async addCheck() {
      this.ruleForm.submissionTime = this.updateCurrentTime();
    // let Iem  = this.ruleForm.scheduledTime[0] + ' - ' + this.ruleForm.scheduledTime[1]
    // this.ruleForm.scheduledTime = Iem
      const res = await AddLinAn (this.ruleForm)
      await editLin({id:this.LinID,temporaryPavingId:res.data.id})
      console.log(res.data)
      this.getAll();
      this.stepNum = 0;
      this.Ids = ''
      this.ggXin = false;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 取消
    closeFn(val) {
      if (val == 1) {
        this.detbox = false;
        this.edit = true;
      } else {
        this.ggXin = false;
        this.stepNum = 0;
      }
    },
    //删除管理列表
   async delGuan(item){
     await delLinAn({id:item.id})
     this.getAll()
    },
    //删除详情临铺
   async Lindel(item){
     await delLin({id:item.id})
     this.SelLins()
    },
    // 新增铺位
    addPavingPlan(val) {
      this.formInline = {
        shopName: '',
        positionInformation: '',
        shopArea: '',
        useTo: '',
        rent: '',
        locationImage: '',
        locationDescription: '',
        temporaryPavingId: ''
      }
      if(val == 1){
        this.isAdd = true
      }else{
        this.isAdd = true
      }
    },
      // 新增铺位取消按钮
    doCancel(){
      this.isAdd = false
    },
    // 新增铺位确定按钮
  async doSubmit(){
    if(this.detbox){
        this.formInline.temporaryPavingId = this.msgid
      let res =  await addLin(this.formInline)

    }else{
        let res =  await addLin(this.formInline)
       this.LinID = res.data.id

        if (this.Ids.length == 0) {
            this.Ids = this.LinID
          } else {
            this.Ids = this.Ids + ',' + this.LinID
          }
    }
    this.isAdd = false
    this.SelLins()

    },
    //删除新增的铺位
   async DelLin(item){
      await delLin({id:item.id})
      this.Ids = this.Ids.replace(new RegExp(`^${item.id}(?=,)`), '');
      console.log(item)
      this.SelLins()
    },
    //查询新增的铺位
    async SelLins(){
      if(this.detbox){
        const res =  await selLin({temporaryPavingId:this.msgid})
          this.linShop =res.data
      }else{
        const formData = new FormData();
        formData.append('ids',this.Ids)
             const Linlist =  await selectList(formData)
             this.linShop = Linlist.data
               console.log('Lin',Linlist.data )
      }

     },
    handleClick() {},
    // 上传

    handlePreview(file) {
      console.log(file);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },

    // 重置按钮
    resetting() {
      this.formSel = {
        affiliation: '',
        createUser: '',
        createDate: '',
        contacts: '',
      };
      this.getAll();
    }
  },
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped>
/deep/ .first-column-bg {
  background-color: #f4f4f5 !important;
}

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

/deep/ .el-form-item__content {
  width: 80%;
}



.formSearch {
  margin: 30px 0 20px 0;
  display: flex;
  width: 100%;
  font-size: 12px;
  flex-direction: column;

  .el-form-item {
    margin: 0px;
    margin-right: 10px;
  }

  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 160px;
  }

  .el-form-item__content {
    width: 160px;
  }
}

.greens {
  color: #89c1a3;
}

/deep/ .el-table__row {
  font-size: 12px;
}

.fenye {
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
  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;
}

/deep/ .el-pagination__total {
  margin-top: 4px;
}

/deep/ .btn-prev {
  position: absolute;
  top: 4px;
  right: 69px;
}

/deep/ .el-pager {
  position: absolute;
  top: 4px;
  right: 40px;
}

/deep/ .btn-next {
  position: absolute;
  top: 4px;
  right: 10px;
}

.dialog_css {
  padding: 0px;
}

.dialog_xin {
  padding: 0px;
}

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

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

/deep/.el-dialog__title {
  color: #000;
}

.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 .el-upload:hover {
  border-color: #409eff;
}

.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-form-item__label {
  font-weight: normal;
  font-size: 12px;
}

/* ::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 .btn .el-button:focus,
.el-button:hover {
  border: 1px solid #3f9b6a;
}

::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 .el-dialog__wrapper {
  .dialog_css {
    margin-right: 12px;
    margin-top: 61px !important;

    .el-dialog__title {
      font-size: 16px !important;
      font-weight: 600;
      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>
