<template>
  <div>
    <div class="fa-box">
      <div class="lik">
        <div class="fa-ji">
          <div class="ge"></div>
          <div class="fa-text">电站信息管理</div>
        </div>
        <el-button type="primary" @click="dialogVisible = true">添加电站信息</el-button>
        
      </div>
      <div class="biaoge">
        <div class="biao-box">
          <div class="fhuo">
            <div class="fahuos">
              <div class="fas-text">电站编码</div>
              <input
                type="text"
                placeholder="请输入电站编码"
                class="fa-input"
                v-model="telegramId"
                @keyup.enter="onSubmit"
              />
            </div>
            <div class="fahuos">
              <div class="fas-text">电站名称</div>
              <input
                type="text"
                placeholder="请输入电站名称"
                class="fa-input"
                v-model="telegramName"
                @keyup.enter="onSubmit"
              />
            </div>
            <div class="fahuos">
              <div class="fas-text">状态</div>
              <input
                type="text"
                placeholder="请输入状态"
                class="fa-input"
                v-model="telegramStatus"
                @keyup.enter="onSubmit"
              />
            </div>
          </div>
        </div>
        <div class="zhonlist">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            height="100%"
            :header-cell-style="{ background: '#F4F4F5', color: '#303133' }"
          >
            <el-table-column
              fixed
              prop="telegramId"
              label="电站编码"
              width="137"
            >
            </el-table-column>
            <el-table-column prop="telegramName" label="电站名称" width="157">
            </el-table-column>
            <el-table-column prop="telegramSynopsis" label="简称" width="157">
            </el-table-column>
            <el-table-column prop="contactPerson" label="联系人" width="157">
            </el-table-column>
            <el-table-column prop="taxNumber" label="税号" width="157">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="197">
            </el-table-column>
            <el-table-column prop="phoneNumber" label="电话" width="137">
            </el-table-column>
            <el-table-column prop="fax" label="传真" width="137">
            </el-table-column>
           
            <el-table-column prop="status" label="状态" width="137">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  style="color:#00cc00"
                  v-if="scope.row.status == 1"
                  >正常</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  v-if="scope.row.status == 0"
                  style="color:#ff0000"
                  >禁用</el-button
                >
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="134">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="dialogVisibleg = true"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  v-if="scope.row.province == '审核中'"
                  @click="dialogVisibleyu = true"
                  >禁用</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="tiaoshu">
        <div class="left-io"></div>
        <div class="gon">共{{total}}条</div>
        <div class="kls">
          <el-pagination
            :page-size="20"
            :pager-count="11"
            layout="prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 仪表记录 -->
    <el-dialog
      title="添加承运单位"
      :visible.sync="dialogVisible"
      width="60%"
      style='margin-top: 8%'
      :append-to-body="true"
    >
      <div class="liebiao">
        <div class="fahuo-li">
          <div class="a" style="width: 33.3%">
            <div class="sd">
              <div class="fa-ji">电站编码</div>
              <input
                type="text"
                placeholder="请输入电站编码"
                class="input"
                v-model="tekegram.telegramId"
              />
            </div>
            <div class="sd">
              <div class="fa-ji">联系人</div>
              <input
                type="text"
                placeholder="请输入联系人"
                class="input"
                v-model="tekegram.contactPerson"
              />
            </div>
            <div class="sd">
              <div class="fa-ji">所在地址</div>
              <!-- <input type="text" placeholder="请输入所在地址" class="input" /> -->
              <el-cascader
                size="large"
                class="inp"
                :options="options"
                v-model="selectedOptions"
                @change="handleChange"
              >
              </el-cascader>
            </div>
            <div class="sd">
              <div class="fa-ji">传真</div>
              <input
                type="text"
                placeholder="请输入传真"
                class="input"
                v-model="tekegram.fax"
              />
            </div>
          </div>
          <div class="a" style="width: 33.3%">
            <div class="sd">
              <div class="fa-ji">电站名称</div>
              <input
                type="text"
                placeholder="请输入电站名称"
                class="input"
                v-model="tekegram.telegramName"
              />
            </div>
            <div class="sd">
              <div class="fa-ji">客户简称</div>
              <input
                type="text"
                placeholder="请输入客户简称"
                class="input"
                v-model="tekegram.clientTelegramSynopsis"
              />
            </div>
            <div class="sd">
              <div class="fa-ji">详细地址</div>
              <input
                type="text"
                placeholder="请输入详细地址"
                class="input"
                v-model="tekegram.detailAddress"
              />
            </div>
            <div class="sd">
              <div class="fa-ji">相关证书</div>
              <div class="tuimg" style="width: 80%; height: 104px">
                <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisiblex">
                  <img width="100%" :src="dialogImageUrl" alt="" />
                </el-dialog>
              </div>
            </div>
          </div>
          <div class="a" style="width: 33.3%">
            <div class="sd">
              <div class="fa-ji">简称</div>
              <input
                type="text"
                placeholder="请输入简称"
                class="input"
                v-model="tekegram.telegramSynopsis"
              />
            </div>
            <div class="sd">
              <div class="fa-ji">税号</div>
              <input
                type="text"
                placeholder="请输入税号"
                class="input"
                v-model="tekegram.taxNumber"
              />
            </div>
            <div class="sd">
              <div class="fa-ji">电话</div>
              <input
                type="text"
                placeholder="请输入电话"
                class="input"
                v-model="tekegram.phoneNumber"
              />
            </div>
          </div>
        </div>
        <div class="queren">
         
          <el-button type="primary" round @click="btnque">确认</el-button>
          <el-button round @click='dialogVisible = false'>取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { regionData, CodeToText } from "element-china-area-data";
export default {
  data() {
    return {
      activeName: "first",
      tableData: [],
      tablelist: [
        {
          date: "请输入产品型号",
          name: "请输入产品编号",
          province: "请输入产品数量",
          city: "请输入到货时间",
        },
      ],
      tablelists: [
        {
          date: "请输入产品型号",
          name: "请输入产品编号",
          province: "请输入产品数量",
          city: "请输入到货时间",
          zhuan: "已完成",
        },
      ],
      dialogVisible: false,
      dialogVisibleg: false,
      dialogVisibleq: false,
      dialogVisibleh: false,
      dialogVisibleyu: false,
      dialogImageUrl: "",
      dialogVisiblex: false,
      dialogVisibleyi: false,
      options: regionData,
      selectedOptions: [],
      tekegram: {
        telegramId: "", //电站编码
        telegramName: "", //电站名称
        telegramSynopsis: "", //简称
        contactPerson: "", //联系人
        taxNumber: "", //税号
        detailAddress: "", //详细地址
        clientTelegramSynopsis: "", //客户简称
        phoneNumber: "", //电话
        fax: "", //传真
        address: "", //所在地
        certificate:
          "https://images.cnblogs.com/cnblogs_com/s313139232/1258426/o_o_headers.jpg", //相关证书
      },
      pageNum: 10, //条数
      pageSize: 10, //页数
      telegramId: "", //电站编码
      telegramName: "", //电站名称
      telegramStatus: "", //转态
      total:'',//总条数
    };
  },
  mounted() {
    this.huoqudian();
  },
  methods: {
    handleChange() {
      var loc = "";
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]];
      }
      this.tekegram.address = loc;
    },
    //回车搜索
    onSubmit(){
      this.huoqudian()
    },
    //获取电站列表
    huoqudian() {
      let that = this;
      var url = "/api/system/telegram/list";
      let params = {
        pageNum: that.pageNum,
        pageSize: that.pageSize,
        telegramId: that.telegramId,
        telegramName: that.telegramName,
        telegramStatus: that.telegramStatus,
      };
      that.$axios
        .post(url, params)
        .then(function (res) {
          console.log(res);
          that.tableData = res.rows;
          that.total = res.total
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    //新增电站
    btnque() {
      let that = this;
      var url = "/api/system/telegram/add";
      let params = {
        telegramId: that.tekegram.telegramId,
        telegramName: that.tekegram.telegramName,
        telegramSynopsis: that.tekegram.telegramSynopsis,
        contactPerson: that.tekegram.contactPerson,
        taxNumber: that.tekegram.taxNumber,
        detailAddress: that.tekegram.detailAddress,
        clientTelegramSynopsis: that.tekegram.clientTelegramSynopsis,
        phoneNumber: that.tekegram.phoneNumber,
        fax: that.tekegram.fax,
        address: that.tekegram.address,
        certificate: that.tekegram.certificate,
      };
      that.$axios
        .post(url, params)
        .then(function (res) {
          console.log(res);
          if (res.code == 200) {
            that.$message({
              message: "添加成功",
              type: "success",
            });
            that.dialogVisible = false;
            that.huoqudian()
          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    //编辑发货申请
    handleClick(row) {
      console.log(row);
      this.dialogVisibleg = false;
      this.dialogVisibleyu = true;
    },
    handleClicks(tab, event) {
      console.log(tab, event);
    },
    //上传图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //查看订单
    cha() {
      this.dialogVisibleg = true;
    },
    //确认发货
    que() {
      this.dialogVisibleq = true;
    },
    //预览图片
    chuans() {
      this.dialogVisibleh = false;
      this.dialogVisibleyu = true;
    },
    //返回上一层
    fanhuis() {
      this.dialogVisibleh = true;
      this.dialogVisibleyu = false;
    },
    //查看仪表记录详情
    yis() {
      this.dialogVisibleyi = true;
      this.dialogVisible = false;
    },
    //关闭
    closeDialog() {
      this.dialogVisibleyi = false;
      this.dialogVisible = true;
    },
  },
};
</script>
<style>
.el-dialog__body {
  padding: 5px 20px;
  padding-bottom: 0;
}
.el-dialog__title {
  font-size: 22px !important;
  color: #000000 !important;
  font-weight: 500;
}
.el-upload--picture-card {
  width: 80px !important;
  height: 80px !important;
  line-height: 80px !important;
}
.el-upload-list--picture-card .el-upload-list__item {
  width: 80px !important;
  height: 80px !important;
  line-height: 80px !important;
}
.el-carousel__container {
  margin-top: 52px;
  height: 629px;
}
/* .el-table /deep/.DisabledSelection .cell .el-checkbox__inner{
    margin-left: -30px;
    position:relative;
  } */
.el-table /deep/.DisabledSelection .cell:before {
  content: "全选";
  position: absolute;
  right: 42px;
}
.el-tabs el-tabs--top {
  width: 100%;
}
</style>
<style scoped>
@import "../../css/fa.css";
@import "../../css/pei.css";
@import "../../css/sonda.css";
</style>