<template>
  <div>
    <div class="fa-box">
      <div class="lik">
        <div class="fa-ji">
          <div class="ge"></div>
          <div class="fa-text">产品管理</div>
        </div>
        <div class="peiches">
          <el-button type="primary" @click="addEidor">添加产品</el-button>
        </div>
      </div>
      <div class="biaoge">
        <div class="biao-box">
          <div class="fhuo">
            <div class="fahuos">
              <div class="fas-text">部门ID</div>
              <input type="text" placeholder="请输入部门ID" class="fa-input" />
            </div>
            <div class="fahuos">
              <div class="fas-text">产品型号</div>
              <input
                type="text"
                placeholder="请输入产品型号"
                class="fa-input"
              />
            </div>
            <div class="fahuos">
              <div class="fas-text">产品编号</div>
              <input
                type="text"
                placeholder="请输入产品编号"
                class="fa-input"
                v-model="productId"
              />
            </div>
            <div class="fahuos">
              <div class="fas-text">状态</div>
              <input
                type="text"
                placeholder="请输入状态"
                class="fa-input"
                v-model="telegramStatus"
              />
            </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="productId"
              label="产品编码"
              width="184"
            >
            </el-table-column>
            <el-table-column prop="productName" label="产品名称" width="284">
            </el-table-column>
            <el-table-column prop="productType" label="产品类型 " width="128">
            </el-table-column>
            <el-table-column prop="breed" label="品种" width="128">
            </el-table-column>
            <el-table-column prop="size" label="尺寸" width="160">
            </el-table-column>
            <el-table-column prop="weight" label="重量" width="128">
            </el-table-column>
            <el-table-column prop="deptId" label="事业部 " width="160">
            </el-table-column>
            <el-table-column prop="deptId" label="状态 " width="160">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  v-if="scope.row.status == 0"
                  style="color: rgba(0, 204, 0, 1)"
                  >正常</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  v-if="scope.row.status == 1"
                  style="color: rgba(255, 0, 0, 1)"
                  >停用</el-button
                >
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="196">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="editor(scope.row)"
                  >编辑</el-button
                >
                <el-button type="text" size="small" v-if="scope.row.status == 0"
                  >禁用</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="editorProduct == '' ? '添加产品' : '编辑商品'"
      :visible.sync="dialogVisible"
      width="55%"
      style="margin-top: 10%"
      :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="productModel"
              />
            </div>
            <div class="sd">
              <div class="fa-ji">品类</div>
              <input
                type="text"
                placeholder="请输入品类"
                class="input"
                v-model="breed"
              />
            </div>
            <div class="sd">
              <div class="fa-ji">事业部</div>
              <input
                type="text"
                placeholder="请输入事业部"
                class="input"
                v-model="deptId"
              />
            </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="productId"
              />
            </div>
            <div class="sd">
              <div class="fa-ji">尺寸</div>
              <input
                type="text"
                placeholder="请输入尺寸"
                class="input"
                v-model="size"
              />
            </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="productType"
              />
            </div>
            <div class="sd">
              <div class="fa-ji">重量</div>
              <input
                type="text"
                placeholder="请输入重量"
                class="input"
                v-model="weight"
              />
            </div>
          </div>
        </div>

        <div class="queren">
          <el-button type="primary" round @click="xinzeng">确认</el-button>
          <el-button round @click="dialogVisible = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      dialogImageUrl: "",
      productModel: "", //产品型号
      breed: "", //品类
      deptId: "", //事业部
      productId: "", //产品编码
      size: "", //尺寸
      productType: "", //产品类型
      weight: "", //重量
      pageSize: 10,
      pageNum: 1,
      productId: "", //产品编码
      telegramStatus: "", //转态
      total: null,
      editorProduct: '',//获取同行的所有数据

    };
  },
  mounted() {
    this.chanpinliet();
  },
  methods: {
    //新增产品
    xinzeng() {
      let that = this;
      var url = "/api/system/product/add";
      let params = {
        productModel: that.productModel,
        breed: that.breed,
        deptId: that.deptId,
        productCoding: that.productId,
        size: that.size,
        productType: that.productType,
        weight: that.weight,
      };
      that.$axios
        .post(url, params)
        .then(function (res) {
          console.log(res);
          that.$message({
            message: "添加成功",
            type: "success",
          });
          that.dialogVisible = false
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    //获取产品信息列表
    chanpinliet() {
      let that = this;
      var url = "/api/system/product/list";
      let params = {
        pageNum: that.pageNum,
        pageSize: that.pageSize,
        productId: that.productId,
        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);
        });
    },
    //编辑发货申请
    handleClick(row) {
      console.log(row);
      this.dialogVisibleg = false;
      this.dialogVisibleyu = true;
    },
    //上传图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //**编辑商品 * */
    editor(val) {
      console.log(val)
      this.editorProduct = val;
      this.dialogVisible = true
      this.productModel = val.productModel
      this.breed = val.breed
      this.deptId = val.deptId
      this.productId = val.productId
      this.size = val.size
      this.productType = val.productType
      this.weight = val.weight
    },
    /**  添加商品 * */
    addEidor() {
      this.dialogVisible = true
      this.editorProduct = '';
    }

  },
};
</script>
<style>
.el-dialog__body {
  padding: 5px 20px;
  padding-bottom: 68px;
}
.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;
}
</style>
<style scoped>
@import "../../css/fa.css";
@import "../../css/pei.css";
</style>