<template>
  <div class="lc-bsinfo" :class="{ 'lc-taskbsinfo': type == 'taskInfo' }">
    <div class="lc_title">基本信息</div>
    <div class="lc_bsmain" v-if="type == 'info'">
      <!--图片上传-->
      <div class="lc_bsmain">
        <label style=" margin-right: 16px;display: block;">项目图片</label>
        <el-upload ref='uploadRef' class="avatar-uploader" :action="upLoadUrl" :show-file-list="false"
          :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :data="upLoadQuery"
          :with-credentials="data.withcredentials">
          <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 100%; height: 100%;" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <!--基础字段-->
      <div>
        <el-form label-position="right" :model="form" label-width="112px">
          <el-row :gutter="5">
            <el-form-item label="项目名称" :required="true">
              <el-input v-model="form.name" style=" margin-left: -6px;" maxlength="80"></el-input>
            </el-form-item>
            <el-form-item label="项目负责人" :required="true">
              <el-select v-model="form.leader_user_id" placeholder="请选择" filterable remote
                :remote-method="userremoteMethod">
                <!-- <div style="height: 150px;overflow: auto;" v-infinite-scroll="loadmore"
                  :infinite-scroll-immediate="false"> -->
                <el-option v-for="item in data.userlist" :key="item.id" :label="item.nickname" :value="item.id" />
                <!-- </div> -->
              </el-select>
            </el-form-item>
            <el-form-item label="项目状态" style="margin-left: 9px;">
              <el-input v-model="form.status_text" disabled></el-input>
            </el-form-item>
            <el-form-item label="项目类型" style="margin-left: 11px;">
              <el-select v-model="form.type" placeholder="请选择">
                <el-option label="技术开发" :value="1"></el-option>
                <el-option label="产品开发" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="项目代码" style="margin-left: 10px;" :required="true" prop="code">
              <el-input v-model="form.code" maxlength="80"></el-input>
            </el-form-item>
          </el-row>
          <el-row :gutter="16">
            <el-form-item label="项目编号">
              <el-input v-model="form.sn" disabled></el-input>
            </el-form-item>
            <el-form-item label="产品分类" class="lc_lcselect" :required="true">
              <el-cascader v-model="form.cate_id" :options="cate.cateArry"
                :props="{ expandTrigger: 'hover', value: 'id', label: 'name', children: 'children' }"
                clearable></el-cascader>
            </el-form-item>
            <el-form-item label="项目预计开始日期" style="  margin-left: 13px;">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.plan_start_time"
                  style="width: 100%;margin-left: -10px;" :value-format="formatset" :format="formatset"></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="项目预计结束日期" style="  margin-left: 4px;">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.plan_end_time"
                  style="width: 100%;margin-left: -10px;" :value-format="formatset" :format="formatset"></el-date-picker>
              </el-col>
            </el-form-item>
          </el-row>
          <el-row :gutter="16">
            <el-form-item :label="item.label" v-for="item in html.datelist" :key="item.label">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="form[item.vModel]"
                  style="width: 100%;margin-left: -7px;" :value-format="formatset" :format="formatset"
                  disabled></el-date-picker>
              </el-col>
            </el-form-item>
          </el-row>
          <el-row :gutter="16">
            <el-col :span="5">
              <el-form-item label="项目优先级" style=" margin-left: -8px;">
                <el-select v-model="form.level" placeholder="请选择">
                  <el-option label="P0" :value="0"></el-option>
                  <el-option label="P1" :value="1"></el-option>
                  <el-option label="P2" :value="2"></el-option>
                  <el-option label="P3" :value="3"></el-option>
                  <el-option label="P4" :value="4"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label="项目包含品牌" class="lcse2" :required="true" style="width: 500px;">
                <el-select v-model="form.brand_ids" multiple placeholder="请选择" style="width: inherit;" size="small">
                  <el-checkbox v-model="data.checked" @change='selectAll' style="margin-left:20px">
                    全选
                  </el-checkbox>
                  <el-option v-for="item in brandArry" :key="item.name" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="lc_bsmain lc_taskmain" v-if="type == 'taskInfo'">
      <!--基础字段-->
      <div>
        <el-form label-position="right" :model="taskform" label-width="112px">
          <el-row :gutter="5">
            <el-form-item label="任务编码">
              <el-input v-model="taskform.sn" style=" margin-left: -6px;" maxlength="80" disabled></el-input>
            </el-form-item>
            <el-form-item label="任务名称" style="margin-left: 5px;">
              <el-input v-model="taskform.name" style=" margin-left: -6px;" maxlength="80" disabled></el-input>
            </el-form-item>
            <el-form-item label="任务负责人" style=" margin-left: 11px;" :required="true">
              <el-select v-model="taskform.leader_user_id" placeholder="请选择" filterable remote
                :remote-method="userremoteMethod">
                <!-- <div style="height: 150px;overflow: auto;" v-infinite-scroll="loadmore"
                  :infinite-scroll-immediate="false"> -->
                <el-option v-for="item in data.userlistall" :key="item.id" :label="item.nickname" :value="item.id" />
                <!-- </div> -->
              </el-select>
            </el-form-item>
            <el-form-item label="任务审核人" style=" margin-left: 11px;" :required="true">
              <el-select v-model="taskform.reviewer_user_id" placeholder="请选择" filterable remote
                :remote-method="userremoteMethod">
                <!-- <el-select v-model="taskform.reviewer_user_id" placeholder="请选择" filterable remote
                :remote-method="remoteMethod"> -->
                <!-- <div style="height: 150px;overflow: auto;" v-infinite-scroll="loadmore"
                  :infinite-scroll-immediate="false"> -->
                <el-option v-for="item in data.userlistall" :key="item.id" :label="item.nickname" :value="item.id" />
                <!-- </div> -->
              </el-select>
            </el-form-item>
            <el-form-item label="业务状态" style="margin-left: 9px;">
              <el-input v-model="taskform.task_status_text" disabled></el-input>
            </el-form-item>
            <el-form-item label="业务审核状态" style="margin-left: 9px;">
              <el-input v-model="taskform.examine_status_text" disabled></el-input>
            </el-form-item>
          </el-row>
          <el-row :gutter="16">

            <el-form-item label="所属项目编号">
              <el-input v-model="taskform.project_sn" disabled></el-input>
            </el-form-item>
            <el-form-item label="所属项目名称">
              <el-input v-model="taskform.project_name" disabled></el-input>
            </el-form-item>
            <el-form-item label="要求完成时间" style="  margin-left: 13px;">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="taskform.required_time_text"
                  style="width: 100%;margin-left: -10px;" :value-format="formatset" :format="formatset"
                  disabled></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="预计开始日期" style="  margin-left: 13px;">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="taskform.plan_start_time_text"
                  style="width: 100%;margin-left: -10px;" :value-format="formatset" :format="formatset"></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="预计完成日期" style="  margin-left: 4px;">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="taskform.plan_end_time_text"
                  style="width: 100%;margin-left: -10px;" :value-format="formatset" :format="formatset"></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="完成日期" style="  margin-left: 4px;">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="taskform.end_time_text"
                  style="width: 100%;margin-left: -10px;" :value-format="formatset" :format="formatset"
                  disabled></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="T0日期" style="  margin-left: 4px;" v-if="kmT0tag == 'km'">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="taskform.t0_time_text"
                  style="width: 100%;margin-left: -10px;" :value-format="formatset" :format="formatset"
                  :disabled="taskform.examine_status_text == '未下推' || taskform.examine_status_text == '已结束'"></el-date-picker>
              </el-col>
            </el-form-item>
            <div v-else class="l-button lcbhbt" @click="data.bhshow = true" v-if="data.reject && data.reject.length > 0">
              查看任务审核驳回明细</div>
          </el-row>
          <el-row v-if="kmT0tag == 'km'">
            <div class="l-button lcbhbt" @click="data.bhshow = true" v-if="data.reject && data.reject.length > 0">
              查看任务审核驳回明细</div>
          </el-row>
        </el-form>
      </div>
    </div>
    <!-- 查看驳回原因弹框-->
    <el-dialog title="驳回原因" v-model="data.bhshow" :before-close="handleClose" width="500px">
      <div class="lcbhcontent" v-if="data.reject && data.reject.length > 0" style="max-height: 400px; overflow-y: auto;">
        <div v-for="(it, index) in data.reject" :key="index">
          <div class="lc_bhitem">
            <div>驳回时间:{{ it.create_time_text }}</div>
            <div>驳回人：{{ it.create_user_name }}</div>
            <div>{{ it.msg }}</div>
          </div>
        </div>
      </div>
      <div v-else>
        暂无记录
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="data.bhshow = false">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="lcBaseInfo">
import { getUsers, getCate, getBrand } from '../../utils/lc'
import { infoForm, taskForm } from '../../utils/lc_data'
import { reactive, ref, onMounted, defineExpose, defineProps, watch, getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'
/* 数据 */
let { proxy } = getCurrentInstance()// this替代
const prop = defineProps(['type', 'kmT0tag'])
const html = reactive({
  datelist: [{ label: '项目开始日期', vModel: 'start_time' }, { label: '项目发布日期', vModel: 'issue_time' }, { label: '项目量产日期', vModel: 'product_time' }, { label: '项目上架日期', vModel: 'online_time' }, { label: '项目结束日期', vModel: 'end_time' }]
})
const upLoadQuery = ref({ type: 'images', language_id: 1 })
const upLoadUrl = ref(process.env.VUE_APP_API_BASEURL + 'admin/project/upload/file')
const formatset = ref('YYYY/MM/DD')
let imageUrl = ref('')
const form = reactive(JSON.parse(JSON.stringify(infoForm)))
const taskform = reactive(JSON.parse(JSON.stringify(taskForm)))
let lastPage = ref(0)
let data = reactive({
  checked: false,//全选
  withcredentials: true,
  reject: [],// 驳回原因列表
  bhshow: false,// 驳回原因弹框
  userlist: [],
  userlistall: [],
  userSet: { page: 1, size: 99999, nickname: '' }
})
let cate = reactive({
  cateArry: [],
  cateSet: { cate_name: '', pid: '', is_tree: 1 }
})
let brandArry = ref([])
watch(() => form.brand_ids, (newValue, oldValue) => {
  data.checked = brandArry.value.length == newValue.length ? true : false
})
/* 初始化 */
// 获取品牌数据
getBrand().then(res => {
  brandArry.value = res

})
// 获取产品分类数据
getCate(cate.cateSet).then(res => {
  cate.cateArry = res
})
// 挂载初始化---生命周期
onMounted(() => {
  getUsers({ page: 1, size: 99999, nickname: '' }).then(res => {
    lastPage.value = res.last_page
    data.userlistall = JSON.parse(JSON.stringify(res.data))
  })
  init()
})
/* 方法 */
function init (value) {
  data.userSet.page = 1
  data.userSet.nickname = value
  getUsers(data.userSet).then(res => {
    lastPage.value = res.last_page
    data.userlist = JSON.parse(JSON.stringify(res.data))
    data.userlistall = JSON.parse(JSON.stringify(res.data))
  })
}
// 远程搜索人
function userremoteMethod (value) {
  proxy.$http.showLoading(false).get('project/data/user', { nickname: value, page: 1, size: 99999 }).then(res => {
    data.userlistall = res.data.data
    data.userlist = res.data.data
  })
}
// 品牌全选
function selectAll () {
  form.brand_ids = []
  if (data.checked) {
    brandArry.value.map((item) => {
      form.brand_ids.push(item.id)
    })
  } else {
    form.brand_ids = []
  }
}
//
function handleClose () {
  data.bhshow = false
}
// 项目负责人懒加载
function loadmore () {
  data.userSet.page++
  if (data.userSet.page <= lastPage.value) {
    getUsers(data.userSet).then(res => {
      data.userlist = [...JSON.parse(JSON.stringify(data.userlist)), ...res.data]
    })
  }
}
function handleAvatarSuccess (response, uploadFile) {
  if (response.status == 200) {
    imageUrl.value = response.data.fileurl ? response.data.fileurl : ''
    form.image = imageUrl.value
    proxy.$refs.uploadRef.clearFiles()
  }
}
function beforeAvatarUpload (file) {
  const isJPG = ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type)
  const isLt2M = file.size / 1024 / 1024 < 1
  if (!isJPG) {
    ElMessage.error('上传图片格式不对!')
  }
  if (!isLt2M) {
    ElMessage.error('上传图片大小不能超过 1MB!')
  }
  return isJPG && isLt2M
}
function remoteMethod (value) {
  init(value)
}
/* 曝露方法或者属性值给父组件或者其他子组件用 */
defineExpose({
  form,
  imageUrl,
  taskform,
  data
})
</script>
<style scoped lang="scss">
@import '../../assets/style/lc.scss';
</style>
