<!--下订单表单-->
<template>
  <div class="order-container">
    <div class="order-from">
      <div class="order-title">下订单</div>
      <div class="order-inputBox">
        <div class="input-item">
          <RedStar />
          <inputVue v-model="addInfo.userName" title="下单人" placeholder="请输入下单人姓名" class="inputWidth" width="380px" />
        </div>
        <div class="input-item">
          <RedStar />
          <inputVue v-model="addInfo.userPhone" title="联系方式" placeholder="请输入联系方式" class="inputWidth" width="380px" />
        </div>
      </div>
      <div class="order-inputBox">
        <div class="input-item">
          <RedStar />
          <inputVue title="签订日期" class="inputWidth">
            <el-date-picker v-model="addInfo.signDate" type="date" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"
              style="width: 380px" />
          </inputVue>
        </div>
        <div class="input-item">
          <RedStar />
          <inputVue title="交付日期" class="inputWidth">
            <el-date-picker v-model="addInfo.deliveryDate" value-format="yyyy-MM-dd HH:mm:ss" type="date"
              placeholder="选择日期" style="width: 380px" />
          </inputVue>
        </div>
      </div>
      <div class="order-inputBox">
        <div class="input-item">
          <RedStar />
          <inputVue title="交付地址" class="inputWidth">
            <el-select v-model="addInfo.deliveryProvince" clearable placeholder="省/市"
              style="width: 150px; margin-left: 55px" @change="provinceChange($event)">
              <el-option v-for="item in form.provinceList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </inputVue>
          <inputVue title="" class="inputWidth">
            <el-select v-model="addInfo.deliveryCity" clearable placeholder="市/区" style="width: 150px"
              @change="cityChange($event)">
              <el-option v-for="item in form.cityList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </inputVue>
          <inputVue title="" class="inputWidth">
            <el-select v-model="addInfo.deliveryArea" clearable placeholder="县/街道" style="width: 150px">
              <el-option v-for="item in form.countyList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </inputVue>
          <inputVue v-model="addInfo.deliveryAddress" placeholder="请输入详细地址" class="inputWidth" width="440px" />
        </div>
      </div>
      <div class="order-inputBox">
        <div class="input-item">
          <RedStar />
          <inputVue v-model="addInfo.receiver" title="收货人" placeholder="请输入收货人姓名" class="inputWidth" width="380px" />
        </div>
        <div class="input-item">
          <RedStar />
          <inputVue v-model="addInfo.receiverPhone" title="收货人联系方式" placeholder="请输入联系方式" class="inputWidth"
            width="380px" />
        </div>
      </div>
      <div class="order-inputBox">
        <div class="input-item">
          <inputVue title="备注" class="inputWidth">
            <el-input v-model="addInfo.remark" type="textarea" :rows="4" placeholder="请输入备注" style="width: 380px" />
          </inputVue>
        </div>
      </div>
    </div>
    <div class="order-list">
      <div class="title-box">
        <div class="list-title">产品列表</div>
      </div>
      <div class="order-table">
        <!-- <el-table :data="addInfo.productList" :header-cell-style="{ background: '#2483b3', color: 'white' }"
          style="width: 100%" border>
          <el-table-column type="index" label="序号" width="171px" />
          <el-table-column prop="brandName" label="产品品牌" />
          <el-table-column prop="categoryIds" label="产品品类" />
          <el-table-column prop="productCode" label="产品型号" />
          <el-table-column prop="productQuantity" label="产品数量" />
          <el-table-column prop="productPrice" label="产品单价" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="deleteTableDataClick(scope.$index, scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-table :data="productList" :show-header="false" style="width: 100%">
          <el-table-column prop="index" label="序号" width="171px" />
          <el-table-column prop="brandName" label="产品品牌">
            <template slot-scope="scope">
              <el-select v-model="brandName" clearable placeholder="请选择">
                <el-option v-for="item in list.brandList" :key="item.brandCode" :label="item.brandName"
                  :value="item.brandName" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="categoryIds" label="产品品类">
            <template slot-scope="scope">
              <el-select v-model="categoryIds" clearable placeholder="请选择" @change="categoryIdChange">
                <el-option v-for="item in list.categoryList" :key="item.id" :label="item.categoryName"
                  :value="item.categoryName" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="productCode" label="产品型号">
            <el-select v-model="productCode" clearable placeholder="请选择">
              <el-option v-for="item in list.codeList" :key="item.id" :label="item.productCode"
                :value="item.productCode" />
            </el-select>
          </el-table-column>
          <el-table-column prop="productQuantity" label="产品数量">
            <el-input v-model="addInfo.productList.productQuantity" placeholder="请输入内容" />
          </el-table-column>
          <el-table-column prop="productPrice" label="产品单价">
            <el-input v-model="productPrice1" placeholder="请输入内容" />
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="addTableDataClick"> 保存 </el-button>
            </template>
          </el-table-column>
        </el-table> -->
        <!-- <div class="inputContainer">
          <div class="inputItem"> <input type="text" ></div>
          <div class="inputItem" > <input type="text" ></div>
          <div class="inputItem"> <input type="text" ></div>
          <div class="inputItem"> <input type="text" ></div>
          <div class="inputbtn"> <el-button>保存</el-button></div>
        </div> -->
        <el-table ref="tb" :data="addInfo.productList" border class="el-tab" style="width: 100%;">
          <el-table-column type="index" label="序号" width="50px" />
          <el-table-column prop="brandName" label="产品品牌" width="240px">
            <template slot-scope="{row,$index}">
              <span v-if="!showEdit[$index]">{{ row.brandName }}</span>
              <!-- <el-input v-if="showEdit[$index]" v-model="addInfo.productList.brandName" placeholder="请输入产品品牌">
              </el-input> -->
              <el-select v-if="showEdit[$index]" v-model="brandName" clearable placeholder="请输入产品品牌">
                <el-option v-for="item in list.brandList" :key="item.brandCode" :label="item.brandName"
                  :value="item.brandName" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="categoryIds" label="产品品类" width="240px">
            <template slot-scope="{row,$index}">
              <span v-if="!showEdit[$index]">{{ row.categoryIds }}</span>
              <!-- <el-input v-if="showEdit[$index]" v-model="addInfo.productList.categoryIds" placeholder="请输入产品品类">
              </el-input> -->
              <el-select v-if="showEdit[$index]" v-model="categoryIds" clearable placeholder="请输入产品品类"
                @change="categoryIdChange">
                <el-option v-for="item in list.categoryList" :key="item.id" :label="item.categoryName"
                  :value="item.categoryName" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="productCode" label="产品型号" width="240px">
            <template slot-scope="{row,$index}">
              <span v-if="!showEdit[$index]">{{ row.productCode }}</span>
              <!-- <el-input v-if="showEdit[$index]" v-model="addInfo.productList.productCode" placeholder="请输入产品型号">
              </el-input> -->
              <el-select v-if="showEdit[$index]" v-model="addInfo.productList.productCode" clearable
                placeholder="请输入产品型号">
                <el-option v-for="item in list.codeList" :key="item.id" :label="item.productCode"
                  :value="item.productCode" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="productQuantity" label="产品数量" width="200px">
            <template slot-scope="{row,$index}">
              <span v-if="!showEdit[$index]">{{ row.productQuantity }}</span>
              <el-input v-if="showEdit[$index]" v-model.number="addInfo.productList.productQuantity" placeholder="请输入产品数量"  onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8" min="1"/>
            </template>
          </el-table-column>
          <el-table-column prop="productPrice" label="产品单价" width="200px">
            <template slot-scope="{row,$index}">
              <span v-if="!showEdit[$index]">{{ row.productPrice }}</span>
              <el-input v-if="showEdit[$index]" v-model.number="addInfo.productList.productPrice" placeholder="请输入产品单价" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8" min="1" />
            </template>
          </el-table-column>
          <el-table-column header-align="center" align="center" width="200" label="操作">
            <template slot-scope="{row,$index}">
              <el-button v-if="!showEdit[$index]" size="small" @click="showUpdate($index, row)">
                编辑
              </el-button>
              <el-button v-if="!showEdit[$index]" size="small" @click="showDelete($index, row)">
                删除
              </el-button>
              <el-button v-if="showEdit[$index]" size="small" style="color: #85ce61;" @click="submit($index, row)">
                确定
              </el-button>
              <el-button v-if="showEdit[$index] && isFirst[$index] > 1" size="small" style="color: red;" @click="cancelUpdate($index)">
                取消
              </el-button>
              <el-button v-if="showEdit[$index] && isFirst[$index] === 1" size="small" style="color: red;" @click="showDelete($index)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-button @click="handleAddBtn">
        添加采购需求
      </el-button>
    </div>
    <div class="btnBox">
      <el-button type="primary" class="save" @click="save"> 保存 </el-button>
      <!-- <el-button type="info" class="close">取消</el-button> -->
    </div>
  </div>
</template>

<script>
import RedStar from "../../components/mycomponent/redStar.vue";
import inputVue from "../../components/mycomponent/input/inputVue.vue";

import { add, order_area } from "../../api/order/order";
import { C_list } from "../../api/product/category";
import { SelectList } from "../../api/product/brand";
import { list } from "../../api/product/product";
export default {
  name: 'orderShop',
  components: {
    RedStar,
    inputVue,
  },
  data() {
    return {
      brandName: "",
      categoryIds: "",
      productCode: "",
      productQuantity: "",
      productPrice: "",
      list: {
        codeList: [],
        brandList: [],
        categoryList: [],
      },
      showEdit: [], // 用来判断是否处于编辑状态
      isFirst:[], // 用来判断是否初次添加
      productList: [{ index: "" }],
      isShowAdd: false, // 添加采购需求
      options: {},
      addInfo: {
        userName: "", // 下单人
        userPhone: "", // 联系方式
        signDate: "", // 签订日期
        deliveryDate: "", // 交付日期
        deliveryProvince: "", // 地址-省
        deliveryCity: "", // 地址-市
        deliveryArea: "", // 地址-区
        deliveryAddress: "", // 详细地址
        receiver: "", // 收货人
        receiverPhone: "", // 收货人联系方式
        remark: "", // 备注
        productList: [],
      },
      form: {
        provinceList: [],
        cityList: [],
        countyList: [],
      },
      CITY: [],
      XIAN: [],
    };
  },
  watch: {
    addInfo: {
      handler(newval, oldval) {
        if (!this.addInfo.deliveryProvince) {
          this.addInfo.deliveryCity = "";
          this.addInfo.deliveryArea = "";
        } else if (!this.addInfo.deliveryCity) {
          this.addInfo.deliveryArea = "";
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    order_area("pid=0", {}).then((res) => {
      console.log(res, "Sheng");
      this.form.provinceList = res;
    });
    C_list().then((res) => {
      // 获取产品品类列表
      this.list.categoryList = res.data;
    }),
      SelectList().then((res) => {
        // 获取产品品牌列表
        this.list.brandList = res;
      });
  },
  methods: {
    save() {
      if (this.valiateProduct()) {
        if (this.valiateForm()) {
          add(this.addInfo).then((res) => {
            // 添加成功
            this.$message({
              message: "保存成功",
              type: "success",
            });
            this.addInfo = {
              userName: "", // 下单人
              userPhone: "", // 联系方式
              signDate: "", // 签订日期
              deliveryDate: "", // 交付日期
              deliveryProvince: "", // 地址-省
              deliveryCity: "", // 地址-市
              deliveryArea: "", // 地址-区
              deliveryAddress: "", // 详细地址
              receiver: "", // 收货人
              receiverPhone: "", // 收货人联系方式
              remark: "", // 备注
              productList: [],
            };
          });
        }
      }
    },
    provinceChange(that) {
      console.log(that);
      order_area(`pid=${that}`, {}).then((res) => {
        console.log(res, "Shi");
        this.form.cityList = res;
      });
    },
    cityChange(that) {
      console.log(that);
      order_area(`pid=${that}`, {}).then((res) => {
        console.log(res, "Xian");
        this.form.countyList = res;
      });
    },
    showAddDialogClick() {
      this.isShowAdd = true;
    },
    close() {
      this.isShowAdd = false;
    },
    // 添加项目新需求
    handleAddBtn() {
      if (this.showEdit[this.addInfo.productList.length - 1] === false || this.addInfo.productList.length === 0){
        const obj = {
        brandName: '',
        categoryIds: '',
        productCode: '',
        productQuantity: '',
        productPrice: ''
      }
      this.addInfo.productList.push(obj);
      this.showEdit[this.addInfo.productList.length - 1] = true
      this.isFirst[this.addInfo.productList.length - 1] = 1
      this.brandName = ""
      this.categoryIds = ""
      this.productCode = ""
      this.productQuantity1 = ""
      this.productPrice1 = ""
      }else{
        this.$message.warning('请先保存上一次采购需求')
      }
    },
    addTableDataClick() {
      const obj = {};
      obj.brandName = this.brandName;
      obj.categoryIds = this.categoryIds;
      obj.productCode = this.productCode;
      obj.productQuantity = this.productQuantity1;
      obj.productPrice = this.productPrice1;
      this.addInfo.productList.push(obj);
      (this.brandName = ""),
        (this.categoryIds = ""),
        (this.productCode = ""),
        (this.productQuantity1 = ""),
        (this.productPrice1 = "");
    },
    deleteTableDataClick(tabIndex, row) {
      this.addInfo.productList = this.addInfo.productList.filter(
        (product, index) => {
          return index !== tabIndex;
        }
      );
    },
    categoryIdChange(e) {
      const index = this.list.categoryList.findIndex((item) => {
        return item.categoryName == e;
      });
      console.log(index);
      const code = this.list.categoryList[index].id;
      console.log(code);
      // 获取产品型号列表
      list({ categoryId: code }).then((res) => {
        this.list.codeList = res;
      });
    },
    valiateProduct() {
      // 验证产品列表
      if (this.addInfo.productList.length) {
        return true;
      } else {
        this.$message({
          message: "产品列表不能为空",
          type: "error",
        });
        return false;
      }
    },
    valiateForm() {
      const {
        addInfo: {
          userName,
          userPhone,
          signDate,
          deliveryDate,
          deliveryProvince,
          deliveryCity,
          deliveryArea,
          deliveryAddress,
          receiver,
          receiverPhone,
        },
      } = this;
      if (
        userName &&
        userPhone &&
        signDate &&
        deliveryDate &&
        deliveryProvince &&
        deliveryCity &&
        deliveryArea &&
        deliveryAddress &&
        receiver &&
        receiverPhone
      ) {
        let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
        if(reg.test(userPhone)&& reg.test(receiverPhone)){
          return true
        }else{
          this.$message({
          message: "手机号格式不正确",
          type: "error",
        });
          return false
        }
      } else {
        this.$message({
          message: "请先填写完整订单信息",
          type: "error",
        });
        return false;
      }
    },
    // 确定保存
    submit(index, row) {
      // 发送请求，隐藏输入框
      const { productCode, brandName, categoryIds, addInfo: { productList: { productQuantity, productPrice } } } = this
      if (categoryIds && brandName) {
        if( productQuantity > 0 && productPrice > 0){
          row.productCode = this.addInfo.productList.productCode
        row.brandName = this.brandName
        row.categoryIds = this.categoryIds
        row.productQuantity = this.addInfo.productList.productQuantity
        row.productPrice = this.addInfo.productList.productPrice
        this.$message({
          type: 'success',
          message: '已缓存，记得点击保存提交修改喔！',
          duration: 888,
          onClose: () => {
            this.$set(this.showEdit, index, false) // vue添加属性的方法
          }
        })
        row.productCode = this.addInfo.productList.productCode
        row.brandName = this.brandName
        row.categoryIds = this.categoryIds
        row.productQuantity = this.addInfo.productList.productQuantity
        row.productPrice = this.addInfo.productList.productPrice
        this.$set(this.isFirst, index, 2)
        this.brandName = ''
        this.categoryIds = ''
        this.addInfo.productList.productCode = ''
        this.addInfo.productList.productQuantity = ''
        this.addInfo.productList.productPrice = ''
        }else {
          this.$message.error('单价或数量需大于等于1')
        }
      } else {
        this.$message({
          message: "请先完整选择或填写信息",
          type: "error",
        });
      }
    },
    // 修改
    showUpdate(index, row) {
      this.showEdit[index] = true
      this.$set(this.showEdit, index, true) // 这里要用$set方法，否则页面状态不更新
      this.brandName = row.brandName
      this.categoryIds = row.categoryIds
      this.addInfo.productList.productCode = row.productCode
      this.addInfo.productList.productQuantity = row.productQuantity
      this.addInfo.productList.productPrice = row.productPrice
    },
    // 取消修改
    cancelUpdate(index) {
      this.$confirm('取消修改？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$set(this.showEdit, index, false)
        })
        .catch(() => { })
    },
    //  删除
    showDelete(index, row) {
      this.$confirm('确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.addInfo.productList = this.addInfo.productList.filter((item, Index) => index !== Index)
          this.showEdit = this.showEdit.filter((item, Index) => index !== Index)
          this.isFirst = this.showEdit.isFirst((item, Index) => index !== Index)
          this.$message({
            message: '已删除',
            type: 'success'
          })
        })
        .catch(() => { })
    },
  },
};
</script>

<style lang="scss" scoped>
.order-container {
  .order-from {
    .order-title {
      height: 60px;
      line-height: 40px;
      position: relative;
      padding: 10px 0 10px 20px;
      font-weight: bold;
      color: white;
      background-color: #28739e;
      font-size: 16px;
    }

    .order-inputBox {
      display: flex;
      margin-left: 20px;

      .input-item {
        display: flex;
        width: 540px;
        align-items: center;
        justify-content: space-between;
      }
    }
  }

  .order-list {
    .title-box {
      margin-top: 20px;
      font-size: 16px;
      font-weight: bold;
      color: white;
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #28739e;
    }

    .order-table {
      margin: 10px 20px;
    }
  }

  .btnBox {
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .save,
    .close {
      width: 100px;
    }
  }
}
</style>