 <!-- 站点列表 -->
 <!-- :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
 :filter-method="filterHandler" -->
 <template>
    <div class="siteList-wrap">
        <el-table :data="tableData1.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%"
              :key="random()">
              <!-- 其他列 -->
              <el-table-column prop="name" label="站点简称" width="210">
                <template slot-scope="scope">
                  <div class="flex">
                    <span :class="(scope.row.type == 'a' ? 'green' : 'blue')">{{ scope.row.type == 'a' ? '查重服务' : '写作辅助'
                    }}</span>
                    <span class="">{{ scope.row.name }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="stock" label="今日供货价">
                <template slot-scope="scope">
                  <div class="flex cell_render">
                    <span>¥{{ scope.row.stock }}/篇</span>
                    <img class="edit_icon" src="@/assets/register/tableEdit.svg" alt="">
                  </div>
                </template>
              </el-table-column>

              <!-- 价格列 -->
              <el-table-column label="售价">
                <template v-slot="{ row, $index }">
                  <el-popover v-model="row.price_popover" placement="top" trigger="manual" :ref="`popover-${$index}`"
                    @show="popshow">
                    <!-- 弹框内容 -->
                    <div style="text-align: center">
                      <GuipInput ref="GuipInput" v-if="!row.word" width="252px" v-model="row.edit_price" label="售价"
                        placeholder="请输入售价" unit="元">
                      </GuipInput>
                      <div v-else class="flex">
                        <GuipInput ref="GuipInput" width="133px" v-model="row.edit_price" label="售价" placeholder="请输入售价"
                          unit="元">
                        </GuipInput>
                        <span class="shortspan">/</span>
                        <GuipInput ref="GuipInput" width="133px" v-model="row.edit_word" placeholder="请输入字符" unit="字符">
                        </GuipInput>
                      </div>
                      <!-- <el-input v-model="row.edit_price" size="small" placeholder="请输入价格" /> -->
                      <div class="flex" style="text-align: right; margin-top: 32px;justify-content: flex-end;">
                        <GuipButton size="medium" @click="cancelEdit(row, 'price')">取消</GuipButton>
                        <GuipButton type="primary" @click="savePrice(row, 'price')" size="medium">确定</GuipButton>
                      </div>
                    </div>
                    <!-- 触发弹框的按钮 -->
                    <span slot="reference" @click="handlePriceClick(row, $index, 'price')">

                      <div class="flex cell_render">
                        <span v-if="row.word" :key="random()">¥{{ row.price }}/{{ row.word }}字</span>
                        <span v-else :key="random()">¥{{ row.price }}/篇</span>
                        <img class="edit_icon" src="@/assets/register/tableEdit.svg" alt="">
                      </div>
                    </span>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column prop="stock" label="排序">
                <template v-slot="{ row, $index }">
                  <el-popover v-model="row.num_popover" placement="top" trigger="manual" :ref="`popover-${$index}`"
                    @show="popshow">
                    <!-- 弹框内容 -->
                    <div style="text-align: center">
                      <GuipInput ref="GuipInput" width="252px" v-model="row.edit_num" label="排序" placeholder="请输入数字">
                      </GuipInput>
                      <p style="    width: 252px;
    margin-left: 40px;
    text-align: right;color: #8A9099;letter-spacing: 0.08em;">输入＞0的数，越小排序越前；重复则新者优先；0则默认排序</p>
                      <!-- <el-input v-model="row.edit_price" size="small" placeholder="请输入价格" /> -->
                      <div class="flex" style="text-align: right; margin-top: 32px;justify-content: flex-end;">
                        <GuipButton size="medium" @click="cancelEdit(row, 'num')">取消</GuipButton>
                        <GuipButton type="primary" @click="savePrice(row, 'num')" size="medium">确定</GuipButton>
                      </div>
                    </div>
                    <!-- 触发弹框的按钮 -->
                    <span slot="reference" @click="handlePriceClick(row, $index, 'num')">
                      <div class="flex cell_render">
                        <span>{{ row.num }}</span>
                        <img class="edit_icon" src="@/assets/register/tableEdit.svg" alt="">
                      </div>
                    </span>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column prop="stock" label="收款方式" width="195">
                <template slot-scope="scope">
                  <div class="flex cell_render" @click="popPayMentModal(scope.row)">
                    <span :class="(scope.row.payment == '0' ? 'normal_payment' : 'self_payment')">{{ scope.row.payment
                      ==
                      '0' ? '默认站点支付' : '自定义支付' }}</span>
                    <img class="edit_icon" src="@/assets/register/tableEdit.svg" alt="">
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="stock" label="状态">
                <!-- <template slot-scope="scope">
                  <GuipSwitch :modelValue="scope.row.homeFlag" @change="onSwitchChange(scope.row)">
                  </GuipSwitch>
                </template> -->
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="112">
                <template slot-scope="scope">
                  <div class="flex">
                    <el-button type="text">服务列表</el-button>
                    <el-button @click="handleClick(scope.row)" type="text">站点设置</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
              :current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
              :total="tableData1.length">
            </el-pagination>
            <Footer></Footer>
    </div>
 </template>
 <script>
import Footer from '@/components/Footer.vue';

export default {
  name: 'HomeView',
  data() {
    return {
        tableData1:[],

    }
  },
  components: {
    // HelloWorld
    Footer,
  },
  methods: {
    random() {
      var randomNumber = Math.random();
      return randomNumber
    },
   
  }
}
</script>
<style lang="scss">

</style>