<template>
  <div class="app-container">
    <div v-show="viewState == 1">
      <button-bar
        ref="btnbar"
        view-title="供应商管理"
        :btndisabled="btndisabled"
        @btnhandle="btnHandle"
      />
      <div class="main-content">
        <div class="searchcon">
          <el-button size="small" class="searchbtn" @click="clicksearchShow">
            {{ searchxianshitit }}
          </el-button>
          <div v-show="isSearchShow" class="search">
            <el-form
              ref="queryParams"
              :model="listQuery"
              :inline="true"
              class="tab-header"
            >
             <el-form-item label="供应商名称">
                  <el-input
                    v-model="listQuery.supplier_name"
                    maxlength="20"
                    placeholder="请输入供应商名称"
                    class="addinputw"
                    clearable
                  />
                </el-form-item>
            </el-form>
            <div class="btn" style="text-align: center">
              <el-button
                type="primary"
                size="small"
                icon="el-icon-search"
                @click="dosearch"
                >查询</el-button
              >
              <el-button
                type="primary"
                size="small"
                icon="el-icon-refresh"
                @click="resetQuery"
                >重置</el-button
              >
            </div>
          </div>
        </div>

        <el-table :data="logList" style="width: 100%" border>
          <el-table-column
            label="序号"
            type="index"
            width="60"
            :index="indexMethod"
            fixed
            align="center"
          />
          <el-table-column
            align="center"
            prop="id"
            label="id"
            width="100"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="supplier_name"
            label="供应商名称"
            width="240"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="supplie_grade"
            label="供应商星级"
            width="100"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="group_name"
            label="供应商所属物料组"
            width="160"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="link_man"
            label="联系人"
            width="100"
          >
          </el-table-column>
          <el-table-column align="center" prop="link_phone" label="联系电话" width="160">
          </el-table-column>
          <el-table-column
            align="center"
            prop="c_t"
            label="创建时间"
          >
          </el-table-column>
          <el-table-column
          prop="operate"
          label="操作"
          align="center"
          width="180"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-zoom-in"
              size="small"
              @click="LookStorehousedialog(scope.row)"
              >查看合同</el-button
            >
          </template>
        </el-table-column>
        </el-table>
        <div class="pages">
          <div class="tit" />
          <pagination
            v-show="logList.length > 0"
            :total="total"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.limit"
            class="pagination"
            @pagination="loadLogList"
          />
        </div>
      </div>

     <!-- 销售详细信息 -->
     <el-dialog :title="'合同详细信息'" :visible.sync="editDialog" width="55%">
        <el-table ref="datalist" :data="tempList" border style="width: 100%" >
          <el-table-column property="id" label="id" width="100px" align="center" />
          <el-table-column property="contract_name" label="名称" width="300px" align="center" />
          <el-table-column property="contract_date" label="签订日期" align="center" />
          <el-table-column property="contract_no" label="合同号" align="center" />
        </el-table>
        <div class="pages">
          <div class="tit" />
          <pagination
              v-show="tempList.length > 0"
              :total="count"
              :page.sync="queryInfo.page"
              :limit.sync="queryInfo.limit"
              class="pagination"
              @pagination="LookStoreDialog"
            />
        </div>
      </el-dialog>
    </div>
  </div>
</template>
  
  <script>
import req from "@/api/gfApi";
import Pagination from "@/components/pagination";
import ButtonBar from "@/components/ButtonBar";
export default {
  components: {
    ButtonBar,
    Pagination,
  },
  data() {
    return {
      viewState: 1,
      tabActiveName: "uplog",
      index: "0",
      isSearchShow: false,
      editDialog: false,
      searchxianshitit: "显示查询条件",
      btndisabled: false,
      btnList: [
        {
          type: "info",
          size: "small",
          icon: "cross",
          btnKey: "doClose",
          btnLabel: "关闭",
        },
      ],
      logList: [],
      tempList: [],
      listQuery: {
        page: 1,
        limit: 10,
        supplier_name:''
      },
      queryInfo: {
        page: 1,
        limit: 10,
        ident_id:""
      },
      total: 0,
      count: 0,
      jmdListQuery: {
        contractNumber: "",
        date: "",
      },
    };
  },
  mounted() {
    // 初始化按钮
    this.$refs["btnbar"].setButtonList(this.btnList);
  },
  created() {
    // 初始化变量
    this.init();
  },
  methods: {
    // 搜索条件效果
    clicksearchShow() {
      this.isSearchShow = !this.isSearchShow;
      if (this.isSearchShow) {
        this.searchxianshitit = "隐藏查询条件";
      } else {
        this.searchxianshitit = "显示查询条件";
      }
    },
    dosearch() {
      this.loadLogList();
    },
    resetQuery() {
      this.listQuery = {
        page: 1,
        limit: 10,
        supplier_name:''
      };
      this.total = 0;
      this.loadLogList();
    },
    // 右上角点击事件
    btnHandle(btnKey) {
      switch (btnKey) {
        case "doClose": // 关闭
          this.doClose();
          break;
        default:
          break;
      }
    },
    init() {
      this.loadLogList();
    },
    loadLogList() {
      req.getSupplierList(this.listQuery).then((res) => {
        if(res.code==200){
          this.total = res.data.data.count
          this.logList = res.data.data.list
        }
      });
    },
    LookStorehousedialog(row){
      this.queryInfo.ident_id=row.id
      req.getContract(this.queryInfo).then((res) => {
        if(res.code==200){
          this.editDialog = true
          this.tempList=res.data.data.list
          this.count = res.data.data.count
        }
      });
    },
    LookStoreDialog(){
      req.getContract(this.queryInfo).then((res) => {
        if(res.code==200){
          this.tempList=res.data.data.list
          this.count = res.data.data.count
        }
      });
    },
    // 序号
    indexMethod(index) {
      var pagestart = (this.listQuery.page - 1) * this.listQuery.limit;
      var pageindex = index + 1 + pagestart;
      return pageindex;
    },
    resetState() {
      this.viewState = 1;
    },
    doClose() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.go(-1);
    },
  },
};
</script>
  <style scoped>
</style>
  