<template>
  <div style="padding:20px">
    <el-form size="small" inline>
      <el-form-item label="产品SPID">
        <el-input v-model="form.spId" placeholder="SPID" />
      </el-form-item>
      <el-form-item label="操作人">
        <el-input v-model="form.userName" placeholder="操作人" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchBtn">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div style="margin:30px 0">
      <el-table :data="tableData" max-height="700" border highlight-current-row :header-cell-style="{ 'background-color': '#E4E7ED', color: '#000' }" style="width: 100%;">
        <el-table-column prop="userName" label="操作人" />
        <el-table-column prop="prodceName" label="产品名称" />
        <el-table-column prop="productId" label="产品ID" />
        <el-table-column prop="spid" label="SPID" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="Inquire(scope.row)">查询</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination :current-page.sync="form['pageNum']" :page-sizes="[20, 50, 100, 300]" :page-size="form['pageSize']" layout="total, sizes, pager" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <el-dialog class="dialog" :visible.sync="infoShow">
      <!--      <el-form>-->
      <!--        <el-form-item label="产品订购说明">-->
      <!--          <el-input type="textarea" v-model="orderingInfo" :rows="6"></el-input>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="赠送话费说明">-->
      <!--          <el-input-->
      <!--            v-model="givePhoneInfo"-->
      <!--            :rows="6"-->
      <!--            type="textarea"-->
      <!--          ></el-input>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="活动说明">-->
      <!--          <el-input v-model="manualInfo" :rows="6" type="textarea"></el-input>-->
      <!--        </el-form-item>-->
      <!--      </el-form>-->
      <div>
        <div style="margin-top: 20px">
          <div style="font-weight: bold;padding:10px;font-size: 20px">产品说明</div>
          <div style="border: #c6c6c6 1px solid;padding:10px;border-radius: 10px;height: 200px;overflow-y: scroll" v-html="orderingInfo"></div>
        </div>
        <div style="margin-top: 20px">
          <div style="font-weight: bold;padding:10px;font-size: 20px">产品简述</div>
          <div style="border: #c6c6c6 1px solid;padding:10px;border-radius: 10px;height: 200px;overflow-y: scroll" v-html="givePhoneInfo"></div>
        </div>
        <div style="margin-top: 20px">
          <div style="font-weight: bold;padding:10px;font-size: 20px">活动说明</div>
          <div style="border: #c6c6c6 1px solid;padding:10px;border-radius: 10px;height: 200px;overflow-y: scroll" v-html="manualInfo"></div>
        </div>

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="infoShow = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { post, get } from "@/api/common";
export default {
  data () {
    return {
      form: {
        pageNum: 1,
        pageSize: 20,
        userName: "",
        spId: "",
        productId: "",
      },
      tableData: [],
      infoShow: false,
      phone: [],
      givePhoneInfo: "",
      orderingInfo: "",
      manualInfo: "",
      total: 5000,
    };
  },

  created () {
    // this.search();
  },
  mounted () {
    this.search();
  },

  methods: {
    searchBtn () {
      // 搜索按钮
      this.search();
    },

    Inquire (row) {
      this.infoShow = true;
      this.phone = [JSON.parse(row.notes)];
      this.givePhoneInfo = this.phone[0].givePhoneInfo;
      this.orderingInfo = this.phone[0].orderingInfo;
      this.manualInfo = this.phone[0].manualInfo;
    },
    search () {
      get("/productInfo/getlog", this.form).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
        console.log(res.data.list, "res.data.list");
        // let arr=[]
        this.tableData.forEach((a, i) => {
          get("/productInfo/page", { spid: a.spid }).then((res) => {
            //  arr.push(res.data.list[0].productName)
            // this.tableData[i].prodceName = res.data.list[0].productName;
            this.$set(
              this.tableData[i],
              "prodceName",
              res.data.list[0].productName
            );
          });
        });
        console.log(this.tableData, "this.tableData");
      });
    },
    reset () {
      // 重置
      this.form = {
        spId: "",
        pageSize: 20,
        pageNum: 1,
      };
      this.search();
    },
    handleSizeChange (e) {
      // 单页数量
      this.form.pageSize = e;
      this.search();
    },
    handleCurrentChange (e) {
      // 跳页
      this.form.pageNum = e;
      this.search();
    },
  },
};
</script>

<style scoped>
.tableBox {
  margin-top: 10px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: #bfbfbf 0 0 2px;
}
.dialog /deep/ .el-dialog {
  overflow: auto;
}
.block {
  margin-top: 20px;
  float: right;
}
</style>
